해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: Node 객체
소개
Node 객체는 DOM에서 시조와 같은 역할을 합니다.
다시 말해서 모든 DOM 객체는 Node 객체를 상속 받습니다.
Node 객체의 위상을 그림으로 나타내면 아래와 같습니다.
주요 기능
Node 객체의 주요한 임무는 아래와 같습니다.
관계
엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있습니다.
각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서
문서를 프로그래밍적으로 탐색할 수 있게 됩니다.
- Node.childNodes
- Node.firstChild
- Node.lastChild
- Node.nextSibling
- Node.previousSibling
- Node.contains()
- Node.hasChildNodes()
노드의 종류
Node 객체는 모든 구성요소를 대표하는 객체이기 때문에,
각각의 구성요소가 어떤 카테고리에 속하는 것인지를 알려주는 식별자를 제공합니다.
- Node.nodeType
- Node.nodeName
값
Node 객체의 값을 제공하는 API 입니다.
- Node.nodeValue
- Node.textContent
자식관리
Node 객체의 자식을 추가하는 방법에 대한 API입니다.
바로 전전 포스팅이었나,,, 그때 예제에서 쓰인적이 있었죠.
- Node.appendChild()
- Node.removeChild()
자바스크립트 기본 문법 :: Node 객체 API
Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있습니다.
다음은 관계와 관련된 프로퍼티들입니다.
- Node.childNodes
자식노드들을 유사배열에 담아서 리턴해줍니다. - Node.firstChild
첫번째 자식노드를 의미합니다. - Node.lastChild
마지막 자식노드를 의미합니다. - Node.nextSibling
다음 형제 노드를 의미합니다. - Node.previousSibling
이전 형제 노드를 의미합니다.
아래는 위의 API를 이용해서 문서를 탐색하는 모습을 보여줍니다.
<body id="start">
<ul>
<li><a href="./532">html</a></li>
<li><a href="./533">css</a></li>
<li><a href="./534">JavaScript</a>
<ul>
<li><a href="./535">JavaScript Core</a></li>
<li><a href="./536">DOM</a></li>
<li><a href="./537">BOM</a></li>
</ul>
</li>
</ul>
<script>
var s = document.getElementById('start');
console.log(1, s.firstChild); // #text
var ul = s.firstChild.nextSibling
console.log(2, ul); // ul
console.log(3, ul.nextSibling); // #text
console.log(4, ul.nextSibling.nextSibling); // script
console.log(5, ul.childNodes); //text, li, text, li, text, li, text
console.log(6, ul.childNodes[1]); // li(html)
console.log(7, ul.parentNode); // body
</script>
</body>
위 예제의 실행결과는 아래 그림과 같습니다.
첫번째 출력값이 text 가 나오는 이유는,
body 태그와 ul 태그 사이에 공백이나 줄바꿈이 존재하기 때문입니다.
이것 또한 노드 취급하기 때문에, 바로 ul 태그가 출력되는 것이 아닌 text 가 출력되게 됩니다.