DOM - part2

jiseong·2021년 8월 3일

T I Learned

목록 보기

17/291

Dom을 탐색 할 수 있는 property

📝 예시 코드

<div>
    <h1>Cities</h1>
    <ul>
        <li id="one" class="red">Seoul</li>
        <li id="two" class="red">London</li>
        <li id="three" class="red">Newyork</li>
        <li id="four">Tokyo</li>
    </ul>
</div>

1. parentNode ✔️

parentNode는 해당 요소의 부모 노드를 탐색한다.

const element = document.querySelector('#one');
console.log(element.parentNode); /* parentNode */

2. firstChild, lastChild vs firstElementChild, lastElementChild ✔️

해당 요소의 자식 노드를 탐색한다.
1. firstChild, lastChild

const element = document.querySelector('ul');
console.log(element.firstChild); /* firstChild */
console.log(element.lastChild); /* lastChild */

child node를 element node 또는 text node, comment node로 반환 ❗
여기서는 ul과 li 사이에 줄바꿈 문자가 있어 text node가 반환

❓ 참조
IE를 제외한 대부분의 브라우저들은 요소 사이의 공백 또는 줄바꿈 문자를 텍스트 노드로 취급하기 때문

2. firstElementChild, lastElementChild

const element = document.querySelector('ul');
console.log(element.firstElementChild); /* firstElementChild */
console.log(element.lastElementChild); /* lastElementChild */