j JavaScript

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

3,059

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 - Date Method - JS날짜메서드

Basic	JS - Array - JS배열 ★★★★★

Basic	JS - Array Method - JS배열메서드

Basic	JS - Sorting Array - JS배열정렬

Basic	JS - Booleans() 메서드 - JS참거짓판단 (= JS참거짓메서드 = JS블린메서드 = JS불린즈메…

Basic	JS - Comparison and Logical Operator - JS비교연산자 / JS논리연산자

Basic	JS - if...else 조건문 구문 ★ (= 이프 엘스 조건문 = 이프문) ※ 시간 조건문

Basic	JS - Switch 조건문 구문 (= 스위치문 = 스위치조건문)

Basic	JS - for반복문 ★★★★★ - (JS포반복문 = for문 = JS포문) ※ 가변 배열키

Basic	JS - While 반복문 구문 (= While문 = While반복문 = 와일문 = 와일반복문)

Basic	JS - Break - 반복문중단 (= 브레이크) ★ / Continue - 반복문건너뛰기 (= 컨티뉴) ★…

Basic	JS - Type Conversion - 데이터타입변환 (= 데이터유형변환 = 데이터타입변경 = 데이터유형변…

Basic	JS - Bitwise Operations -

Basic	JS - Regular Expressions -

Basic	JS - Errors - Throw and Try to Catch (에러 처리 구문)

Basic	JS - Debugging (디버깅/디버그) - (에러/오류) 찾기/제거 방법

Basic	JS - Hoisting (호이스팅) - 변수선언끌어올리기 (= 변수선언위치변경)

Basic	JS - Use Strict - 엄격모드 ★★★

Basic	JS - Style Guide and Coding Conventions -

Basic	JS - Best Practices (올바른코딩)

2/67

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

Node 정의/종류

Node 탐색 속성

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

innerHTML 속성

루트노드 (= Root Node)

nodeName 속성

nodeValue 속성

nodeType 속성

[자주 쓰는 nodeType 번호]

JavaScript 관련글

JQuery 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

공지사항

최신글

최신댓글

운영비 후원해주신 분 리스트