[DOM] JS - Navigation - 노드탐색 (= 요소탐색) ※ 텍스트노드복사

3,723

Node 정의/종류

Node 탐색 속성

텍스트노드 접근법 (= 자식노드 및 노드값)

innerHTML 속성

루트노드 (= Root Node)

nodeName 속성

nodeValue 속성

nodeType 속성

Node 정의/종류

1.
노드 (node) : HTML 요소, 요소의 텍스트 내용, 주석 등 HTML 문서의 모든 것이 노드임.

문서노드 : 전체 웹문서

요소노드 : 각 HTML 요소

텍스트노드 : 각 HTML 요소 안의 텍스트

주석노드 : 주석

속성노드 (사용 X) : 각 요소 안의 속성

2.

노드 간의 관계를 통해 노드 탐색 가능.

루트노드 (Root node)
노드의 최상단. 부모 존재 X

조상노드 (Ancestor Node)
해당노드 위에 존재하는 모든 요소

부모노드 (Parent Node)
해당노드 바로 위의 요소

해당노드 (= 현재노드 Current Node)
부모노드는 오직 한개만 가능, 자식노드는 많이 소유 가능.

형제노드 (= 형제자매요소 Sibling Node)

해당노드와 같은 부모노드 갖는 요소

자식노드 (= Child Node)

해당노드 바로 아래 요소

자손노드 (= Decendent Node)

해당노드 아래에 있는 모든 요소

Node 탐색 속성

parentNode

부모노드

childNodes[nodenumber]

자식노드

firstChild

첫번째자식노드

lastChild

마지막자식노드

nextSibling

다음형제노드

previousSibling

이전형제노드

텍스트노드 접근법 (= 자식노드 및 노드값)

1.

요소노드는 텍스트노드와 별개라는 점 명심 !!

즉, 요소노드는 요소 안 내용과 전혀 별개임.

2.

<h1 id="demo">홈짱닷컴 Homzzang.com</h1>

위 예에서,
<h1> 노드엔 「홈짱닷컴 Homzzang.com」표함 안 함.
<h1> 노드는「홈짱닷컴 Homzzang.com」값이 담긴 텍스트노드(TextNode) 포함할 뿐임.
텍스트노드(TextNode)는 innerHTML 속성 이용해 접근 가능.

3.
아래 3가지 방법 통해 텍스트노드(TextNode)에 접근 가능.

var hz = document.getElementById("demo").innerHTML;
var hz = document.getElementById("demo").firstChild.nodeValue;
var hz = document.getElementById("demo").childNodes[0].nodeValue;

※ 아래 3개 예제는 h1노드의 내용 복사해 h2노드에 붙여넣기 (3개 모두 결과 동일)

3-1. (가장 일반적)

<h1 id="h1">홈짱닷컴 Homzzang.com</h1>

<h2 id="h2"></h2>

<script>

var x = document.getElementById("h1").innerHTML;

document.getElementById("h2").innerHTML = x;

</script>

결과보기

3-2.

<h1 id="h1">홈짱닷컴 Homzzang.com</h1>

<h2 id="h2"></h2>

<script>

var x = document.getElementById("h1").firstChild.nodeValue;

document.getElementById("h2").innerHTML = x;

</script>

결과보기

3-3.

<h1 id="h1">홈짱닷컴 Homzzang.com</h1>

<h2 id="h2"></h2>

<script>

var x = document.getElementById("h1").childNodes[0].nodeValue;

document.getElementById("h2").innerHTML = x;

</script>

결과보기

innerHTML 속성

1.
요소노드의 텍스트노드에 접근하는 가장 일반적인 방법.
바로 위 예제 3-1 참고

2.

innerHTML 속성과 동일효과 갖는 아래 방법도 DOM 트리 구조와 탐색 이해에 유용.

firstChild.nodeValue

childNodes[0].nodeValue

루트노드 (= Root Node)

1.

아래 2가지 방법 통해 접근 가능. (약간 차이 있음. 아래 예제 결과보기 클릭해 확인)

document.body

문서 본문

document.documentElement

전체 문서

[예제1]

<!DOCTYPE html>

<html>

<body>

<h1>홈짱닷컴</h1>

<div>

<p>Homzzang.com</p>

<p>홈페이지 제작관리 + 서버관리</p>

</div>

<script>

alert(document.body.innerHTML);

</script>

</body>

</html>

결과보기

[예제2]

<!DOCTYPE html>

<html>

<body>

<h1>홈짱닷컴</h1>

<div>

<p>Homzzang.com</p>

<p>홈페이지 제작관리 + 서버관리</p>

</div>

<script>

alert(document.documentElement.innerHTML);

</script>

</body>

</html>

결과보기

nodeName 속성

노드 이름 (= 노드명) 반환. (※ 읽기전용)

1.

nodeName 에서 N은 항상 대문자로 적음.

2.

요소노드 nodeName : 태그명 (= 태그이름).

속성노드 nodeName : 속성명 (= 속성이름).

텍스트노드 nodeName : #text (항상)

웹문서노드 nodeName : #document (항상)

[예제]

<h1 id="h01">홈짱닷컴 Homzzang.com</h1>

<h2 id="h02"></h2>

<script>

var x = document.getElementById("h01").nodeName;

document.getElementById("h02").innerHTML = x; // H1

</script>

결과보기

nodeValue 속성

노드의 값 지정.

1. Node 종류별 nodeValue

요소노드 nodeValue : null

텍스트노드 nodeValue : 텍스트자체

속성노드 nodeValue : 속성값

2. 위 텍스트노드 접근법 예제 참고
firstChild.nodeValue

childNodes[0].nodeValue

nodeType 속성

노드 타입 반환. (읽기전용)

[자주 쓰는 nodeType 번호]

1 - 요소노드 의미
(예) <h1 class = "title"> 홈짱닷컴 Homzzang.com</ h1>

2 - 속성노드 의미
(예) class = "title"

※ 폐기예고. 작동은 함. cf. XML DOM에선 폐기예고 안 됨.

3 - 텍스트노드 의미

(예) 홈짱닷컴 Homzzang.com

8 - 주석노드
(예) 

9 - 웹문서노드

(예) HTML 문서 자체 (<html>의 부모)

10 - 웹문서타입노드
(예) <! Doctype html>

[예제]

<h1 id="h01">홈짱닷컴 Homzzang.com</h1>

<h2 id="h02"></h2>

<script>

var x = document.getElementById("h01").nodeType;

document.getElementById("h02").innerHTML = x; // 1

</script>

결과보기

JavaScript 관련글

jQuery 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

코멘트입력

검색목록 목록 글쓰기


분류	제목



Form	JS - Forms - 폼양식 유효성 제어

Form	JS - Forms API - 폼유효성

Object	JS - Object - 객체개념(=객체의미=객체정의) ★ 3

Object	JS - Object Property - 객체속성 ★

Object	JS - Object Methods - 객체메서드 ★

Object	JS - Object Accessors - 객체접근자 (Getter/Setter = 게러/세러 = 게터/세터… 2

Functions	JS - Function Definition - 함수선언방법 + 함수호출방법 ★★★ (= 함수구문 + 함수특…

Functions	JS - Function Parameter/argument - 함수 (매개변수/독립변수) ※ 변수 종류 ※ …

Functions	JS - Function Invocation - 함수호출방법1 = (함수방식 + 메서드방식 + 함수생성자방…

Functions	JS - call() 메서드 - 함수호출방법2 (= call메서드 = 콜메서드)

DOM	JS - DOM (= 돔 = 문서객체모델) 정의

DOM	JS - Method - 메서드 (= HTML 요소에 대한 수행 작업)

DOM	JS - Document - 문서객체

DOM	JS - Element Selector - 주요 요소선택자 (= 객체찾기) ※ JS외부링크호출 주의사항

DOM	JS - HTML - 내용입력/내용변경/속성값변경(=속성값입력)

4/89