querySelectorAll / getElementsByTagName
document.querySelectorAll
NodeList를 반환해줍니다.
document.getElementsByTagName()
HTMLCollection를 반환해줍니다.
차이점
html 코드는 아래와 같습니다.
<body>
<h1>Welcome</h1>
<h2>World</h2>
<h3>A</h3>
<p id="first">A first...<a href="https://naver.com" class="link">Naver</a></p>
<p id="second">A second...</p>
<h3>B</h3>
<p>B...<a href="https://daum.net" class="link">Daum</a></p>
<h3>C</h3>
<p>Excepetur sint occaecat cupidatat non proident, sunt in culpa
qui offcia deserunt molit anim id est laborum.
<a href="https://google.com" class="link">Google</a>
</p>
<ul id="color">
<li>Red</li>
<!--red color-->
<li>Blue</li>
<li>Green</li>
</ul>
</body>
위의 코드를 실행시킨 사이트에서 콘솔창에서
querySelectorAll과 getElementsByTagName을 해보면 둘다 4개의 값을 반환해줌을 알 수 있습니다.
그럼 이번에는 <h3>A</h3>태그 옆에 p태그를 하나 추가하여 결과를 확인해보겠습니다.
결과는 아래와 같습니다. pList1은 4개를 반환해주는데
pList2는 5개를 반환해줍니다. 왜 차이가 날까요?
이유는 NodeList는 한번 저장된 값을 계속 저장합니다. 그에 반해
HTMLCollection은 노드의 변경사항이 실시간으로 반영됩니다.
부모, 자식, 형제 노드접근
이번에는 부모자식형제 노드에 접근해보겠습니다.
위의 html 코드에서 다음의 코드를 추가해줍니다. body의 맨아래부분에 추가해주면됩니다.
<ul id="color">
<li id="red">Red</li>
<!--red color-->
<li id="blue">Blue</li>
<li id="green">Green</li>
</ul>
부모노드
콘솔창에서 red를 선택해보겠습니다. red는 getElementById로 선택했습니다.
parentNode와 parentElement로 부모에 접근할 수 있습니다.
둘의 차이는 무엇일까요?
다음과 같이 콘솔창에서 명령어들을 실행합니다
parentNode는 부모노드를 반환합니다. 즉 부모인 노드중 모든 노드를 반환합니다. 여기서 html의 부모노드는 document가 됩니다.
parentElement는 부모노드 중 요소노드만 반환합니다. 여기서 요소노드란 html에서 태그로 이루어진 요소를 말합니다. (p태그, div태그 등) 즉 document는 요소노드가 아니기 때문에 null이 나오게 됩니다.
자식노드
이번에는 자식노드를 찾아보겠습니다. 다음과 같이 콘솔창에 입력해줍니다.
const ul = document.getElementById('color'); -> ul에 접근
그리고 나서 자식노드에 접근하는데 똑같이 2가지 방법이 있습니다.
childNodes는 자식 노드 전부를 반환해줍니다.
children은 자식 노드 중 요소노드만 반환합니다. 보통상황이라면 3이 나오는게 맞습니다.
ul의 자식은 li 3개이기 때문이죠.
여기서도 부모노드와 마찬가지로 NodeList는 모든 타입의 노드들이고
HTMLCollection은 요소타입의 노드들입니다.
위의 부모노드에서 차이점 중 NodeList는 실시간으로 반영이 안되고 HTMLColection은 실시간으로 반영이 된다고 말씀드렸죠? 하지만 childNdoes에선 예외가 발생합니다. 즉 실시간으로 반영이 됩니다.
childNodes에서 text의 의미는 무엇일까요? text가 없는데 말이죠
그 이유는 여기서 text는 공백문자, 줄바꿈 입니다. 따라서 아래 코드에서
줄바꿈, 코멘트, 줄바꿈, 줄바꿈 이런식으로 해서 9개가 나온겁니다.
추가적으로 몇가지를 더 보겠습니다.
위의 코드와 같이 입력하면 text가 나오게 됩니다.
이번에는 요소만 가져와보겠습니다.
firstElementChild, lastElementChild가 훨씬 더 많이 사용됩니다.
형제 노드
이번에는 형제입니다. 두번째 li인 blue를 기준으로 살펴보겠습니다.
형제노드는 이전형제와 다음형제로 나뉩니다.
위와 같이 입력을 하면 text가 나옵니다. 아시다시피 이것은 형제노드중 모든 노드를 가져오는 겁니다. 원하시는 노드를 얻을라면 previousElementSibling을 해줘야합니다.
정리
| 모든노드 | 요소노드만 | |
| 부모 | parentNode | paretnElement |
| 자식 | childNodes firstChild lastChild |
children firstElementChild lastElementChild |
| 형제 | previousSibling nextSibling |
previousElementSibling nextElementSibling |
'프론트엔드 > javascript' 카테고리의 다른 글
| 자바스크립트 DOM&EVENT #4 CSS style, class 제어 (0) | 2023.04.26 |
|---|---|
| 자바스크립트 DOM&EVENT #3 노드생성,추가,복제,삭제 (0) | 2023.04.14 |
| 자바스크립트 - DOM & EVENT 노드에 접근하기 (0) | 2023.04.12 |
| 실용 자바스크립트 (0) | 2023.04.12 |
| 자바스크립트 - async, await (0) | 2023.04.11 |
