• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

목차

  1. Node 정의/종류
  2. Node 탐색 속성
  3. 텍스트노드 접근법 (= 자식노드 및 노드값)
  4. innerHTML 속성
  5. 루트노드 (= Root Node)
  6. nodeName 속성
  7. nodeValue 속성
  8. 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 - 주석노드
(예) <!-- HTML 주석 -->

 

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)

분류 제목
AJAX JS - AJAX - PHP 아작스 예제 ★ (= 입력제시어 = 입력예제)
AJAX JS - AJAX - ASP 아작스 예제 (= 입력제시어 = 입력예제)
AJAX JS - AJAX - DB 아작스 예제 ★ (= 데이터베이스 정보 가져오기) ※ select 태그 optio…
JSON JS - JSON - Introduction (소개)
JSON JS - JSON - Syntax (구문) ★
JSON JS - JSON - JSON vs XML (언어비교)
JSON JS - JSON - Data Types (데이터타입)
JSON JS - JSON - Object (객체)
JSON JS - JSON - Array (배열)
JSON JS - JSON - JSON.parse() 함수 ★ - (JSON문자열 → JS객체) 변환. (= 웹서버와…
JSON JS - JSON - JSON.stringify() 함수 ★ - (JS객체 → JSON문자열) 변환. ※ P…
JSON JS - JSON - PHP (= 서버연동 = DB연동)
JSON JS - JSON - HTML (= 테이블 및 드롭다운 형태로 출력 + 출력개수선택)
JSON JS - JSON - JSONP (= script 이용한 서버연동)
String JS - String - 문자열
String JS - constructor 속성 - 객체생성자함수반환. (문자열 경우)
String JS - length 속성 ★ - 문자열길이 반환 (= length속성 = 렝스속성) ※ 문자개수/텍스트길이…
String JS - prototype 속성(문자열) - 객체에 사용자정의 속성 및 메서드 추가 (프로토타입)
String JS - charAt() 메서드 ★ - 문자열의 지정 위치 문자. (= charAt메서드) ※ 개별문자에 스…
String JS - charCodeAt() 메서드 - 문자열의 지정위치문자의 유니코드 (= charCodeAt메서드 =…
5/67
목록
찾아주셔서 감사합니다. Since 2012