Hello, Dino
Node 본문
Html DOM은 Node로 이루어져있으며, Node에 정보를 저장한다.
Node 종류
| 종류 | 설명 |
| document Node | Html 문서 전체를 나타내는 노드 |
| element Node | 요소 노드. 속성 노드를 가질 수 있는 유일한 노드. |
| attribute node | 요소 노드에 관한 정보를 가지고 있음. |
| text node | 텍스트 노드 |
| comment node | 주석 노드 |
Node 접근
1. getElementByTagName() 메소드를 이용한 접근
2. 노드 간의 관계를 이용한 접근
1. getEelementByTagName() 메소드 이용
특정 태그 이름을 가진 모든 요소를 노드 리스트의 형태로 반환한다.
2. 노드 간의 관계 Property
| Property | |
| parentNode | 부모 노드 |
| childNodes | 자식 노드 리스트 |
| firstChild | 첫 번째 자식 노드 |
| lastChild | 마지막 자식 노드 |
| nextSibling | 다음 형제 노드 |
| prebiousSibling | 이전 형제 노드 |
노드에 대한 정보 - Node Name
nodeName은 노드 고유의 이름을 저장한다. 수정할 수 없는 읽기 전용 프로퍼티
| 노드 | 프로퍼티 값 |
| documnet node | #document |
| element node | 태그 이름 (대문자) |
| attribute node | 속성 이름 |
| text node | #text |
노드에 대한 정보 - Node Value
nodeValue는 노드의 값을 저장한다.
| 노드 | 프로퍼티 값 |
| element node | nudefined |
| attribute node | 해당 속성의 속성 값 |
| text node | 해당 텍스트 문자열 |
노드에 대한 정보 - Node Type
| 노드 | 프로퍼티 값 |
| element node | 1 |
| attribute node | 2 |
| text node | 3 |
| commnet node | 8 |
| documnet node | 9 |
<html>
<head></head>
<body>
<h1 id="first">Node Value Property</h1>
<p id="second">Text</p>
<p id="third">Text</p>
<script>
var firstNodeText = document.getElementById("first");
var pTagNodeList = document.getElementsByTagName("p");
// HTML Collection foreach
for (var item of pTagNodeList){
// element의 first child node는 attribute node
item.innerHTML = firstNodeText.firstChild.nodeValue;
}
</script>
</body>
</html>
Node 관리
1. appendChild()
새로운 노드를 해당 노드의 자식 노드 리스트의 맨 마지막에 추가한다.
<html>
<head></head>
<body>
<h1 id="newItem">New Item</h1>
<div id="list">
<p id="first">First</p>
<p id="second">Second</p>
<p id="third">Third</p>
</div>
<script>
var list = document.getElementById("list");
var newItem = document.getElementById("newItem");
list.appendChild(newItem);
</script>
</body>
</html>
2. insertBefore()
새로운 노드를 특정 자식 노드 바로 앞에 추가한다.
부모노드.insertBefore(새로운자식노드, 기준자식노드);
<html>
<head></head>
<body>
<div id="list">
<p id="first">First</p>
<p id="third">Third</p>
<h1 id="second">Second</h1>
<p id="fourth">Fourth</p>
</div>
<script>
var list = document.getElementById("list");
var thirdItem = document.getElementById("third");
var secondItem = document.getElementById("second");
list.insertBefore(secondItem, thirdItem);
</script>
</body>
</html>
※ 기준 자식 노드에 null 값을 전달하면 새로운 노드는 자식 노드 리스트의 맨 마지막 노드로 추가된다.
즉, list.insertBefore(newItem, null); == list.appendChild(newItem);
3. insertData()
텍스트 노드의 텍스트 데이터에 새로운 텍스트를 추가한다.
텍스트노드.insertBefore(오프셋, 새로운데이터);
* 오프셋(offset): 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 위치부터 추가할 것인지 의미.
<html>
<head></head>
<body>
<div id="text">name is hyeonjeong</div>
<script>
var textNode = document.getElementById("text").firstChild;
textNode.insertData(6, "TEST");
</script>
</body>
</html>
Node 생성
1. createElement()
2. createAttribute()
3. createTextNode()
<html>
<head></head>
<body>
<div id="text"></div>
<script>
// Create ElementNode
var newElementNode = document.createElement("p");
// Create AttributeNode
var newAttributeNode = document.createAttribute("style");
newAttributeNode.value = "color:red";
newElementNode.setAttributeNode(newAttributeNode);
// Create TextNode
var newTextNode = document.createTextNode("New Text !");
newElementNode.appendChild(newTextNode);
document.getElementById("text").appendChild(newElementNode);
</script>
</body>
</html>
Node 삭제
1. removeChild()
<html>
<head></head>
<body>
<div id="list">
<p id="1" style="color:red;">1</p>
<p id="2" style="color:blue">2</p>
<p id="3" style="color: blueviolet">3</p>
</div>
<script>
var list = document.getElementById("list");
var removeItem = document.getElementById("2");
list.removeChild(removeItem);
</script>
</body>
</html>
2. removeAttribute()
<html>
<head></head>
<body>
<div id="list">
<p id="1" style="color:red;">1</p>
<p id="2" style="color:blue">2</p>
<p id="3" style="color: blueviolet">3</p>
</div>
<script>
var targetItem = document.getElementById("2");
targetItem.removeAttribute("style");
</script>
</body>
</html>
Node 복제
복제할노드.cloneNode(자식노드복제여부);
Reference
http://tcpschool.com/javascript
'Web > JavaScript' 카테고리의 다른 글
| 문서 객체 모델 (DOM) (0) | 2020.03.09 |
|---|---|
| 객체(Object) (0) | 2020.03.09 |
'Web/JavaScript' Related Articles
more
