[JS] DOM & EVENT #2 부모, 자식, 형제 노드

1. queryselectorAll과 getElementsByTagName의 차이점 

1) 반환값이 다르다

2) 업데이트된 내용

- p태그를 하나 더 추가하고 위의 코드 다시 돌려보면 getElement..는 업데이트하고 querySelectorAll은 반영 x

 

2. 부모노드 접근

- red.parentNode : red라는 id를 가진 태그의 부모노드를 출력

- red.parentElement : red라는 id를 가진 태그의 부모노드를 출력

 

3. parentNode와 parentElement의 차이점

- parentNode : 부모노드를 반환하는데 html의부모노드는 document가 되는 거임, 부모인 노드 중 모든 노드를 반환

- parentElement : 부모노드 중 요소노드만 반환함 (요소노드 : html 태그로 이루어진 요소(ex/p태그, ul태그..)를 의미) -> document는 요소노드가 아니기 때문에 null이 나옴

 

4. Node Type

=> 자주 쓰는 것만 사용하자 (1번, 2번, 3번, 8번, 9번)

https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType

Node.nodeType - Web APIs | MDN

 

5. childNodes와 childeren의 차이점

- childNodes : 자식노드들 전부를 반환 (text, comments, 줄바꿈,,, 이런거 다 반환)

                    ** 예외로 실시간으로 업데이트 안해주는 NodeList를 반환하지만 예외로 childNodes는 실시간 업데이                           트 해주는 NodeList를 반환함 

- childeren : 자식노드 중 요소노드만 반환

 

6. 자식노드

1)  firstChild와 lastChild

• ul.firstChild -> #text (첫번째 노드를 가져옴 : 지금 이 코드는 텍스트를 가져옴) 
• ul.lastChild -> #text (마지막 노드를 가져옴 : 지금 이 코드는 텍스트를 가져옴) 

 

2) firstElementChild 와 lastElementChild 

• ul.firstElementChild ->  (첫번째 요소노드를 가져옴)
• ul.lastElementChild ->  (마지막 요소노드를 가져옴)

 

8. 형제노드

1) previousSibling와 nextSibling

형제노드는 이전 형제(previousSibling)와 다음 형제(nextSibling)로 나누어짐 

• blue.previousSibling->  (첫번째 노드를 가져옴)
• blue.previousSibling->  (마지막 노드를 가져옴)

2) previousElementSibling와 nextElementSibling

• blue.previousElementSibling->  (첫번째 요소노드를 가져옴)
• blue.previousElementSibling->  (마지막 요소노드를 가져옴)

9. 정리

 

 

 

출처 : 코딩앙마