문서객체모델(DOM, Document Object Model)은 HTML 또는 XML 기반 문서와 상호 작용하고 표현하는 소프트웨이 프로그램 내부에 존재하는 기능이나 규칙의 집합(API)이다. DOM은 문서구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
웹 브라우저가 HTML 문서를 읽으면 Docment객체로 시작하는 DOM tree가 만들어진다. tree를 구성하고 있는 객체 하나를 노드(node)라고 부르고, tree에서 자신보다 위에 있는 노드를 부모노드, 같은 계층에서 있는 노드를 형제노드 그리고 자신의 아래에 있는 노드를 자식노드라고 부른다. 아래 그림에서 보면, <head>와 <body>는 같은 계층에 있어서 형제노드, <head>의 자식노드는 <title>, <body>의 자식노드는 <h1>,<a> 등으로 생각하면 이해하기 쉽다.
DOM 구조 접근
첫번째 방법
각각의 DOM구조에 접근할 수 있도록 메서드를 사용할 수 있다. 메서드 중에 여러개의 요소가 선택되는 경우에는 결과값이 배열로 만들어진다. document.getElementById("아이디")와 querySelector를 제외하고 나머지는 복수개이기때문에 한 개의 요소를 사용해야 할 때에는 순번을 작성해야한다.
| 메서드 | 설명 |
| document.getElementsByTagName("태그이름") | 해당 태그 이름의 요소를 모두 선택한다. |
| document.getElementById("아이디") | 해당 아이디의 요소를 선택한다. |
| document.getElementsByClassName("클래스이름") | 해당 클래스에 속한 요소를 모두 선택한다. |
| document.getElementByName("name속성값") | 해당 name속성 값을 가지는 요소를 선택한다. |
| document.querySelector("선택자") | 해당 선택자로 선택되는 요소를 선택한다. |
| document.querySelectorAll("선택자") | 해당 선택자로 선택되는 요소를 모두 선택한다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1> 환영합니다. </h1>
<h2 class="welcome"> OO호텔로 오신 것을 환영합니다. </h2>
<h3 id="notice">몇 가지 공지사항에 대해 알려드리겠습니다.</h3>
<p> 입실시간은 14:00 이며 퇴실시간은 10:00 입니다. </p>
<p> 주요 공지사항은 객실 내에 작성되어있는 안내문을 참조해주세요. </p>
<form method="get">
<label for="name">성함</label><input type="text" name="name" id="name">
</form>
<script>
document.getElementsByTagName("h1")[0].style.color = "red";
document.getElementById("notice").style.color = "blue";
document.getElementsByClassName("welcome")[0].style.color = "lightgray";
document.getElementsByName("name")[0].style.backgroundColor = "lightgreen";
document.querySelector(".welcome").style.color = "green";
document.querySelectorAll("p")[0].style.color = "lightblue";
</script>
</body>
</html>
두번째 방법
기존에는 노드색인을 통해서 색인했다. 노드를 통해 색인할 경우 필요없는 정보까지 전부 색인하는 단점이 존재했다. 이후 단순히 element만을 색인하는 프로퍼티가 나오게 되면서 노드로 색인하는 경우가 감소하게 되었다.
| 속성 | 설명 |
| .parentElement | 해당 요소의 부모 요소 |
| .previousElementSibling | 해당 요소의 위에 있는 형제요소 |
| .nextElementSibling | 해당 요소의 아래에 있는 형제요소 |
| .firstElementChild | 해당 요소의 첫번째 자식 요소 |
| .lastElementChild | 해당 요소의 마지막 자식 요소 |
| .children | 자식 엘레멘트의 집합 (데이터는 배열로 들어옴) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
<li>내용5</li>
</ul>
<script>
document.querySelector("li:nth-of-type(1)").parentElement.style.listStyle = "none";
document.querySelector("li:nth-of-type(2)").previousElementSibling.style.color = "red";
document.querySelector("li:nth-of-type(1)").nextElementSibling.style.color = "blue";
document.querySelector("ul").firstElementChild.style.fontWeight = "bold";
document.querySelector("ul").lastElementChild.style.fontStyle = "italic";
document.querySelector("ul").children[2].style.textDecoration = "underline";
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : DOM을 통해 input 값 받아오기 (0) | 2024.07.29 |
|---|---|
| JavaScript에서 this는 무엇을 가리키는걸까? (0) | 2024.07.29 |
| JavaScript : DOM을 통해 속성을 조작해보자 (0) | 2024.07.27 |
| JavaScript : DOM에서 요소를 조작해보자 (0) | 2024.07.25 |
| JavaScript의 Spread 연산자에 대해 알아보자 (0) | 2024.07.24 |
| JavaScript 이벤트 버블링과 이벤트 캡쳐란? (0) | 2024.07.23 |
| JavaScript 기본형과 참조형의 차이에 대해 알아보자 (0) | 2024.07.23 |
| JavaScript의 getter와 setter 에 대해서 (0) | 2024.07.23 |