[자바스크립트] DOM(2)

노드 리스트

- querySelectAll() 메서드를 사용해 가져온 여러 개의 노드를 저장한 것

- 배열과 비슷한 형태를 띄고 있다.

- 특정 인덱스 값을 가지고 있어 인덱스로 접근이 가능하다.

노드 리스

---

텍스트노드를 사용하는 새로운 요소 추가하기

1. 요소 노드 만들기

- createElement() 메서드

- document.createElement(노드명);

 

2. 텍스트 노드 만들기

- createTextNode() 메서드

- document.createTextNode(텍스트);

 

3. 자식노드 연결하기

- appendChile() 메서드

- 부모노드.appendChilde(자식노드)

---

속성 값이 있는 새로운 요소 추가

1. 요소 노드 만들기

- createElement() 메서드

2. 속성 노드 만들기

- createAttribute() 메서드

3. 속성 노드 연결하기 

- setAttributeNode()

4. 자식노드 연결하기

- appendChild()

 

---

노드 삭제하기

- 노드를 삭제할 때는 부모 노드에서 자식 노드를 삭제해야한다. 따라서 노드를 삭제하기 위해선 부모 노드 부터 찾아야 한다.

 

parentNode 프로퍼티

- 현재 노드의 부모 노드에 접근해서 부모노드의 요소 노드를 반환한다.

- 노드.parentNode

 

removeChild() 메서드

- 자식 노드 삭제

- 부모노드.removeChild(자식노드)