자바스크립트 DOM이란?

 

1. DOM (Document Object Model): 문서 객체 모델

• XML / HTML 문서 내의 모든 요소를 정의하고 각 요소를 접근 하는 방법을 제공하여 문서구조, 스타일, 내용 등을 변경할 수 있도록 한다.
• 정적인 웹페이지에 접근하여 동적인 웹페이지로 만들기 위해 내장되어있는 자바스크립트로 DOM을 조작 (프로그래밍 언어와 독립적이기 때문에 다른 언어도 가능)

2. HTML 요소 선택

- document.getElementById('id'): 해당 아이디 요소 선택

const selectedItem = document.getElementById("id"); //아이디가 #id인 요소 선택

 

- document.getElementsByTagName('tagname'): 해당 태그명으로 요소 모두 선택

const selectedItem = document.getElementsByTagName("li"); // <li> 요소 선택

 

- document.getElementsByClassName('class'): 해당 클래스에 속한 모든 요소 선택

const selectedItem = document.getElementsByClassName("one"); // 클래스가 .one인 요소 선택

 

- document.getElementsByName('name'): 해당 name 의 속성값 요소 선택

const selectedItem = document.getElementsByName("first"); // name 속성값이 'first'인 요소 선택

 

- document.querySelectorAll('css selector'): 해당 선택자의 요소 모두 선택

- document.querySelector('css selector'): 해당 선택자의 요소 1개 선택

🔎 get(Elements) -> element 뒤에 s가 붙을 경우 배열로 반환하기 때문에
특정값을 선택할 경우 뒤에 인덱스를 붙여준다.

 

3. HTML 요소 접근 속성

- element.innerHTML: 선택된 요소의 내용 변경

const name = document.getElementById("text"); // id가 text인 요소를 선택
name.innerHTML = "john" // 선택된 요소 변경

 

 

- element.style.property: 선택된 요소의 css 속성 변경

const change = document.getElementById("change"); //아이디가 change인 요소 선택
change.style.color = "red"; //선택된 요소의 텍스트 색상 변경

4. DOM tree

• 노드는 HTML DOM에서 정보를 저장하는 계층적 단위로 태그와 태그 안에 있는 속성 등도 노드에 포함된다.
• 돔 트리는 노드들의 집합으로 모든 노드는 서로 계층적 관계를 맺는다.

5. 노드의 종류

• 문서노드(document node): HTML 문서 전체를 나타내는 노드
• 요소노드(element node): 모든 HTML 요소. 속성노드를 가질 수 있는 유일한 노드
• 속성노드(attribute node): 모든 HTML 요소의 속성. 해당 요소 노드의 자식노드(child node)에는 포함되지 않는다.
• 텍스트노드(text node): HTML 문서의 모든 텍스트

6. 노드 탐색

• 부모 노드:
  • parentNode
• 자식 노드
  • childNodes: 모든 자식노드를 NodeList로 반환
  • firstChild: 첫번째 자식 노드
  • lastChild: 마지막 자식 노드
• 형제 노드
  • previousSibling: 이전 형제 노드
  • nextSibling: 다음 형제 노드

7. 노드의 값

노드의 대한 정보는 프로퍼티를 통해 접근 가능 nodeName (이름), nodeValue (값), nodeType (타입)

document.childNodes[0].nodeName;
// HTML문서의 모든 자식 노드 중에서 첫번째 노드의 이름 선택

document.getElementById("heading").firstChild.nodeValue;
//아이디가 "heading"인 요소의 첫번째 자식노드의 노드값 선택

document.getElementById("heading").firstChild.nodeType;
//아이디가 "heading"인 요소의 첫번째 자식노드의 타입 선택