-
[javascript] 61. DOM Navigation - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:41JavaScript HTML DOM Navigation
HTML DOM에서, 노드 관계도를 이용하여 노드 트리를 탐사(naviagte)할 수 있습니다.
1. DOM Nodes
W3C HTML DOM 표준에 따르면, 모든 HTML 문서는 노드입니다:- 전체 문서는 문서 노드입니다.- 모든 HTML 요소는 요소 노드입니다.- 텍스트 내부의 HTML 요소는 텍스트 노드입니다.- 모든 HTML 속성은 속성 노드입니다.- 모든 주석은 주석 노드입니다.HTML DOM에서, 노드 트리내의 모든 노드는 자바스크립트에 의해 접근 가능합니다.새로운 노드는 생성되어지고, 모든 노드는 수정되거나 삭제되어 집니다.2. Node Relationships
노트 트리의 노드는 각각 계층적 관계를 갖고 있습니다.부모, 자식, 형제 용어는 관계를 묘사하기 위해 사용됩니다.- 노드 트리에서, 상위 노드는 뿌리(root) 노드라 합니다.- 모든 노드는 root를 제외하고 정확히 하나의 부모를 갖습니다.- 노드는 여러명의 자식들을 갖을 수 있습니다.- 형제는 같은 부모를 갖습니다.<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body></html>
위의 HTML는 이렇게 해석 가능합니다:- <html>은 root 노드 입니다.- <html>은 부모가 없습니다.- <html>은 <head>와 <body>의 부모입니다.- <head>는 <html>의 첫 번째 자식입니다.- <body>는 <html>의 마지막 자식입니다.- <head>는 <title>이라는 하나의 자식을 갖습니다.- <title>은 "DOM Tutorial"이라는 텍스트 노드 자식을 갖습니다.- <body>는 <h1>과 <p>이라는 두 개의 자식을 갖습니다.- <h1>은 "DOM Lesson one"이라는 자식을 갖습니다.- <p>는 "Hello world!"이라는 자식을 갖습니다.- <h1>과 <p>는 형제입니다.3. Navigating Between Nodes
아래 나오는 속성으로 노드를 탐사 할 수 있습니다:- parentNode- childNodes[nodenumber]- firstChild
- lastChild
- nextSibling
- previousSibling
4. Child Nodes and Node Values
innerHTML 속성은, childNodes와 nodeValue 속성을 사용하여 요소의 내용을 가져올 수 있습니다.아래 예제는 <h1> 요소의 노드 값을 복사해서 <p> 요소에 붙여넣는 예제입니다.123456789101112131415<html><body><h1 id="intro">My First Page</h1><p id="demo">Hello!</p><script>var myText = document.getElementById("intro").childNodes[0].nodeValue;document.getElementById("demo").innerHTML = myText;</script></body></html>cs 위 예제에서 getElementById는 메소드이고, childNodes와 nodeValue는 속성입니다.
5. DOM Root Nodes
문서에서 2 개의 특별한 속성을 접근하는 것을 허용합니다:- document.body => 문서의 바디- document.documentElement => 모든 문서123456789101112131415161718<!DOCTYPE html><html><body><p>Hello World!</p><div><p>The DOM is very useful!</p><p>This example demonstrates the <b>document.body</b> property.</p></div><script>alert(document.body.innerHTML);</script></body></html>cs 6. The nodeName Property
nodeName 속성은 노드의 이름을 명시합니다.- nodeName은 읽기 전용입니다.- 요소 노드의 nodeName은 tag name과 동일합니다.- 속성 노드의 nodeName은 attribute name 입니다.- 텍스트 노드의 nodeName은 항상 #텍스트입니다.- 문서 노드의 nodeName은 항상 #문서입니다.7. The nodeValue Property
nodeValue 속성은 노드의 값을 명시합니다.- 요소 노드의 nodeValue는 undefined입니다.- 텍스트 노드의 nodeValue는 텍스트 값 그 자체 입니다.- 속성 노드의 nodeValue는 속성 값 입니다.8. The nodeType Property
nodeType 속성은 노드의 종류를 반환합니다. nodeType은 읽기 전용입니다.가장 중요한 노드 종류들 입니다:
[ 출처: W3Schools ]Element type NodeType Element 1 Attribute 2 Text 3 Comment 8 Document 9 'Web > JavaScript' 카테고리의 다른 글
[javascript] 63. DOM Node List - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 62. DOM Node - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 60. DOM Event Listener - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 59. DOM Event - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 58. DOM CSS - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 57. DOM HTML - 자바스크립트 강좌 JS / CSE (0) 2015.06.13
