● 자식노드의 존재 확인
자식(child) 노드 탐색
- childNodes : 자식 노드 목록을 NodeList 형태로 리턴합니다.
- firstChild : 자식 노드 중, 첫번째 자식 노드를 리턴합니다.
- lastChild : 자식 노드 중, 마지막 자식 노드를 리턴합니다.
자식(child) 요소(element)탐색
- children : 자식 요소(element) 목록을, 'HTMLCollection' 형태로 리턴합니다.
- firstElementChild : 자식 요소(element) 중, 첫번째 요소를 리턴합니다.
- lastElementChild : 자식 요소(element) 중, 마지막 요소를 리턴합니다.
<body>
<div id="outer">
<div class="inner one">1</div>
<div class="inner two">2</div>
<div class="inner three">3</div>
</div>
</body>
<script>
const outer = document.getElementById('outer');
console.log(outer.childNodes)
console.log(outer.firstChild)
console.log(outer.lastChild)
// NodeList(7) [text, div.inner.one, text, div.inner.two, text, div.inner.three, text]
// #text
// #text
</script>text를 반환하는 이유는 텍스트 노드도 반환하기 때문이다. 따라서 outer 뒤에 있는 개행같은 공백까지 모두 포함하여 리턴한다.
하지만 보통 javascript에서 dom을 조작하거나 탐색할 때 사용자는 주석, 공백 텍스트, 줄바꿈 텍스트 등을 조작하기 보다는, <p>, <div>, <table> 등의 element를 조작하고 탐색하고 싶어한다. 그래서 보통 dom을 조작할 때는 node를 탐색하기 보다는 element를 탐색하고 조작한다.
<body>
<div id="outer">
<div class="inner one">1</div>
<div class="inner two">2</div>
<div class="inner three">3</div>
</div>
</body
<script>
const outer = document.getElementById('outer');
console.log(outer.children)
console.log(outer.firstElementChild)
console.log(outer.lastElementChild)
// HTMLCollection(3) [div.inner.one, div.inner.two, div.inner.three]
// <div class="inner one">1</div>
// <div class="inner three">3</div>
</script>
● 부모노드의 존재 확인
부모(parent) 노드 탐색
- parentNode : 부모 노드를 리턴합니다.
부모(parent) 요소(element) 탐색
- parentElement : 부모 요소(element)를 리턴합니다.
<body>
<div id="outer">
<div class="inner one">1</div>
<div class="inner two">2</div>
<div class="inner three">3</div>
</div>
</body>
<script>
const inner = document.querySelector('.inner');
console.log(inner.parentNode)
console.log(inner.parentElement)
</script>위의 출력값, 둘다 똑같은 출력을 한다. 부모노드가 텍스트 노드인 경우는 없기때문이다.
<div id="outer">
<div class="inner one">1</div>
<div class="inner two">2</div>
<div class="inner three">3</div>
</div>
● 형제 노드 탐색
형제(sibling) 노드 탐색
- previousSibling : 같은 레벨의 노드 중, 이전 노드를 리턴합니다.
- nextSibling : 같은 레벨의 노드 중, 다음 노드를 리턴합니다.
형제(sibling) 요소(element)탐색
- previousElementSibling : 같은 레벨의 요소(element) 중, 이전 요소를 리턴합니다.
- nextElementSibling : 같은 레벨의 요소(element) 중, 다음 요소를 리턴합니다.
<body>
<div id="outer">
<div class="banana">banana</div>
<div class="apple">apple</div>
<div class="grape">grape</div>
</div>
</body>
<script>
const apple = document.querySelector('.apple');
console.log(apple.previousSibling)
console.log(apple.nextSibling)
// #text
// #text
console.log(apple.previousElementSibling)
console.log(apple.nextElementSibling)
// <div class="banana">banana</div>
// <div class="grape">grape</div>
</script>
