Languages/Java Script

[Js] Node 객체 | Node 관계 API

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

이번 포스팅은 강의의 "Node객체" 중 Node객체강의와 Node 관계 API 강의를 모두 포함하여 작성하였습니다.

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가 첫번째 노드로 표시되는 경우가 있는데 이는 공백 혹은 줄바꿈과 같은 문자도 노드로 체크하기 때문이다!

이 text라는 객체는 Node의 하위 객체중 CharacterData의 하위 객체이며, 이 또한 Node의 객체이므로 Node객체가 가지고 있는 API를 가지고 있다. 그렇기 때문에 .fristChild라는 객체도 가지고 있다.

'Languages > Java Script' 카테고리의 다른 글

[Js] 문자열로 노드 제어 (0)	2021.02.10
[Js] 노드 종류 API \| 노드 변경 API \| jQuery 노드 변경 API (0)	2021.02.10
[Js] jQuery 속성 제어 API \| jQuery 조회 범위 제한 \| javascript (0)	2021.02.10
[Js] 식별자 API \| 조회 API \| 속성 API (0)	2021.02.10

Contents

새소식

인기 검색어