Dom 트리에 접근하고 수정하는 작업은 크게 두 단계로 나뉜다.
1. 작업을 수행 할 대상 요소를 표현하는 노드를 찾는다.
2. 해당 노드의 텍스트나 자식 요소, 특성 등을 조작한다.

1단계: 요소에 접근하기

DOM 쿼리(DOM Query)라고 부르는 기법, DOM 탐색(Traversing)이라는 부르는 기법이 있다.

하나의 요소 노드를 선택하기

개별 요소를 선택하는 방법은 크게 세 가지로 구분 할 수 있다.

getElementById(): 요소의 id특성 값(페이지 내에서는 유일해야 한다)을 이용한다.
querySelector(): CSS 선택자를 이용하며, 일치하는 요소를 중 첫 번째 요소를 리턴한다.
또한, DOM 트리 내에서 한 요소로부터 다른 요소를 탐색해나갈 수도 있다
(세 번째) 열을 참고하기 바란다.)

여러 개의 노드 선택하기(노드 목록)

여러 개의 요소를 선택하는 방법은 크게 세 가지다.

getElementsByClassName(): 지정된 class 특성 값을 가지는 요소들을 모두 선택한다.
getElementsByTagName(): 지정된 태그 이름을 가지는 요소들을 모두 선택한다.
querySelectorAll(): 지정된 CSS 선택자와 일치하는 요소들을 모두 선택한다.

요소 노드 사이를 탐색하기

한 요소로부터 연관된 다른 요소로 이동할 수 있다.

parentNode: 현재 요소 노드의 부모 노드를 선택한다(단 하나의 요소만 리턴한다)
previousSibling / nextSibling: 현재 DOM 트리 내의 이전 또는 다음 형제 요소를 선택한다.
firstChild / lastChild: 현재 요소의 첫 번째 혹은 마지막 자식 노드를 선택한다.

요소(elements)와 요소 노드(element nodes)라는 단어는 동의어로 사용되기도 하지만, 사람들이 DOM을 통해 요소를 조작한다고 말할 때는 실제로 요소를 표현하는 노드를 이용한다는 뜻이다.

2단계: 요소 조작하기

텍스트 노드에 접근/수정하기

어느 한 요소가 가진 텍스트는 해당 요소의 텍스트 노드에 저장된다. 이 텍스트 노드에 접근하는 방법은 다음과 같다.

nodeValue: 이 속성을 통해 텍스트 노드의 내용에 접근하거나 수정할 수 있다.

HTML 내용을 조작하기

innerHTML 속성을 이용하면, 이 하나의 속성을 통해 모든 자식 요소와 텍스트 콘텐츠에 접근이 가능하다.
특정 요소의 텍스트 콘텐츠에만 접근하려면 textContent 속성을 이용한다.

createElement() 새로운 노드를 생성
createTextNode()

appendChild() 노드 트리에 새로운 노드를 추가
removeChild() 노드 트리에 노드를 제거
이를 DOM 조작(manipulation)이라고 한다.

특성 값에 접근/수정하기

특성을 조작할 때는 다음의 속성과 메서드를 사용할 수 있다.
className / id
이 두 속성을 이용하면 class 특성과 id 특성 값을 가져오거나 변경할 수 있다.

hasAttribute() 지정된 특성이 존재하는지를 확인
getAttribute() 두 번째 메서드는 지정한 특성 값을 가져온다.
setAttribute() 세 번째 메서드는 지정된 특성 값을 변경한다.
removeAttribute() 지정된 특성을 요소로부터 제거한다.