• 회원가입
  • 로그인
  • 구글아이디로 로그인
웹디자인언어 JavaScriptLv 1 : 손님

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

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3,062  

목차

  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)

JavaScript 관련글

JQuery 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글
분류 제목
DOM JS - CSS - 스타일변경
DOM JS - Animation - 애니메이션 (= 동적효과 = 움직임효과)
DOM JS - Events - 이벤트 2
DOM JS - addEventListener() 메서드 ★★★★★ - 이벤트 걸기 (= addEventListen…
DOM JS - Navigation - 노드탐색 (= 요소탐색) ※ 텍스트노드복사
DOM JS - Node - 노드추가, 노드삭제, 노드변경 (= 노드생성, 노드제거, 노드교체)
DOM JS - Collection - HTML요소집합 (= HTML요소묶음)
BOM JS - Window BOM - 윈도우 브라우저객체모델 (BOM: Browser Object Model)
BOM JS - Window Screen 객체 - 화면객체 (= 스크린객체 = screen객체)
BOM JS - Window Location 객체 - 위치객체 (= 로케이션객체 = Location객체) ※ loc…
BOM JS - Window History 객체 - 이력객체 (= 히스토리객체 = History객체 = 뒤로가기 +…
BOM JS - Window Navigator 객체 - 브라우저객체 (= 네이게이터객체 = Navigator객체 =…
BOM JS - Popup Boxes - 팝업상자 (= 팝업박스 = Alert Box + Confirm box + …
BOM JS - Timing Events ★ - 시간간격 코드실행 (= 타이밍 이벤트 = 시간이벤트 = 일정시간별 …
BOM JS - Cookie (쿠키) 사용법 ★★★ - 쿠키 (설정・생성) / 쿠키 (읽기・얻기・가져오기) / 쿠…
AJAX JS - AJAX (아작스) 소개
AJAX JS - AJAX - XMLHttpRequest() 메서드 ★ - 객체생성 (= 아작스/에이잭스 핵심 = X…
AJAX JS - AJAX - open()/send() 메서드 ★ - 서버에 요청 보내기 (GET방식 vs POST방…
AJAX JS - AJAX - Server Response (서버응답) - 콜백함수 사용 예제
AJAX JS - AJAX - XML 아작스 예제 (= xml 데이터 불러와 표만들기)
4/67
목록
오늘: 4,008 | 어제: 9,603 | 최대: 11,609 | 전체: 6,443,934
  • (견적/의뢰/질문/등업) 상담은 게시판 이용해 주세요.
  • 인터넷 임시파일 제거 시 속도 ↑ (Ctrl + Shift + Del)

공지사항

최신글

최신댓글

사이트명:홈짱, 연락처:
Copyright ⓒ https://homzzang.com. All rights reserved.
찾아주셔서 감사합니다. Since 2012