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

3,273

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>

결과보기

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

JavaScript 관련글

JQuery 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

코멘트입력

목록 글쓰기


분류	제목



Basic	JS - Home (JS입문) + Javascript Framework (프레임워크) 종류

Basic	JS - Intro (JS소개)

Basic	JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항

Basic	JS - Output (JS출력= JS쓰기) ★★★★★ document.write() = 다큐먼트라이트

Basic	JS - Syntax (JS구문) ★

Basic	JS - Statement (JS구문= JS명령문)

Basic	JS - Comment (JS주석)

Basic	JS - Variable (JS변수) ★★★★★

Basic	JS - Operator (연산자) - JS연산자 ★★★★★

Basic	JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…

Basic	JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2

Basic	JS - Object - JS객체 ★★★★★

Basic	JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★

Basic	JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★

Basic	JS - Strings - JS문자열

1/89