1. DOM

1.DOM의 주요 특징 및 개념

1. 트리 구조: DOM은 트리 구조로 표현되며, 각 노드는 웹 페이지의 다양한 부분 (예: 요소, 속성, 텍스트 등)을 나타낸다.

2. 라이브 (Live) 특성: DOM은 '라이브'라는 특성이 있다. 즉, DOM에 대한 변경은 즉시 웹 페이지에 반영된다.

3. 조작 가능: 자바스크립트를 사용하여 DOM 요소를 선택, 수정, 추가 또는 제거할 수 있다.

// 요소 선택하기
let heading = document.getElementById('myHeading');

// 텍스트 변경하기
heading.textContent = 'New Heading Text';

// 클릭 이벤트 추가하기
heading.addEventListener('click', function() {
    alert('Heading clicked!');
});

2.DOM tree

DOM Query (요소 접근방법)

1) 하나의 요소 노드 선택

• id 어트리뷰트 값으로 요소 노드를 하나 선택한다. 여러개가 선택되면 첫번째 요소를 반환한다.

• Return: HTMLElement를 상속받은 객체

• CSS 셀렉터를 사용해서 요소 노드 한 개를 선택하고, 여러개 선택한 경우 역시 첫번째 요소만 반환한다.

• Return: HTMLElement를 상속받은 객체

2) 여러 개의 요소 노드 선택

• class 어트리뷰트 값으로 요소 노드를 모두 선택하고 공백 구분으로 여러개의 클래스를 지정할 수 있다.

• Return : HTMLCollection(live)

• 리턴 값이 HTMLCollection인 것은 복수 개가 반환될 때 리스트를 담아 반환하기 위한 객체인데, 배열과 비슷하지만 배열은 아닌 유사 배열 형태이다. 중요한 것은 HTMLCollection은 실시간으로 Node의 상태 변경을 반영한다.

• 태그명으로 요소 노드를 모두 선택한다.

• Return : HTMLCollection (live)

• 지정된 CSS 선택자를 사용해서 요소 노드 모두를 선택한다.

• Return: NodeList(non-live)

3) DOM traversing (탐색)

• 부모 노드를 탐색한다.

• Return: HTMLElement를 상속받은 객체

• 자식 노드를 탐색한다.

• Return: HTMLElement를 상속받은 객체

• 자식 노드 확인 후 유무에 따라 Boolean값 반환한다.

• Return: Boolean

• 자식 노드의 컬렉션 반환. 텍스트 요소를 포함한다.

• Return: NodeList (non-live)

• 자식 노드의 컬렉션을 반환하는데 Element요소만 반환한다.

• Return: HTMLCollection (live)

• 형제 노드를 탐색하며, 텍스트 요소를 포함한다.

• Return: HTMLElement를 상속받은 객체

• 형제 노드를 탐색하며, Element요소만 탐색한다.

• Return: HTMLElement를 상속받은 객체