반응형
노드(node)
▪ HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장하고 있다.
▪ HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 한다.
▪ HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다.
▪ 이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여준다.
노드의 종류
HTML 문서를 구성하는 대표적인 노드의 종류는 아래와 같다.
| 노드명 | 설명 |
| 문서노드(document node) | 문서 전체를 나타내는 노드 |
| 요소노드(element node) | HTML요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드 |
| 속성노드(attribute node) | HTML요소의 속성은 속성 노드 이며, 요소 노드에 관한 정보를 가지고 있음 |
| 텍스트노트(text node) | HTML문서의 모든 텍스트는 텍스트 노드 |
| 주석노드(comment node) | 모든 주석은 주석 노드 |
노드간의 관계
| 관계 | 설명 |
| parentNode | 부모 노드 |
| childNodes | 자식 노드 리스트 |
| firstChild | 첫번쨰 자식 노드 |
| lastChild | 마지막 자식 노드 |
| nextSibling | 다음 형제 노드 |
| previousSibling | 이전 형제 노드 |
노드의 관리
1. 노드 추가
| 메소드명 | 설명 |
| appendChild() | 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가 |
| insertBefore() | 새로우 노드를 특정 자식 노드 바로 앞에 추가 |
| insertDate() | 새로운 노드를 텍스트 데이터에 새로운 텍스트로 추가 |
[예시]
<script>
'use strict';
//1.appendChild
const appendNode = function(){
const parent = document.getElementById('list');
const newItem = document.getElementById('item1');
parent.appendChild(newItem); // parent의 자식노드 맨마지막에 newItem 추가
}
//2.insertBefore
const insertNode = function(){
const parent = document.getElementById('list');
const backend = document.getElementById('backend');
const newItem = document.getElementById('item2');
parent.insertBefore(newItem,backend); // newItem을 backend 앞에 추가
}
//3.insertData
const appendText = function(){
const text = document.getElementById('text').firstChild;
text.insertData(7,"아주 피곤한 "); //text의 7번째 자리에 "아주 피곤한" 추가
}
</script><body>
<h2>노드의 추가</h2>
<p id="item1">JavaScript</p>
<p id="item2">TypeScript</p>
<hr/>
<div id="list">
<p id="backend">node.js</p>
<p>HTML</p>
<p>CSS</p>
</div>
<hr/>
<p id="text">지금 시간은 오후 3시 14분 입니다.</p>
<hr/>
<button onclick="appendNode()">노드추가1</button>//버튼이 클릭되면 appendNode() 메소드 실행
<button onclick="insertNode()">노드추가2</button>//버튼이 클릭되면 insertNode() 메소드 실행
<button onclick="appendText()">텍스트추가</button>//버튼이 클릭되면 appendText() 메소드 실행
</body>[결과]
노드의 추가
JavaScript
TypeScript
node.js
HTML
CSS
지금 시간은 오후 3시 14분 입니다.
2. 노드 생성
| 메소드명 | 설명 |
| createElement() | 새로운 요소 노드를 만듬 |
| createAtrribute() | 새로운 속성 노드를 만듬 |
| createTextNode() | 새로운 텍스트 노드를 만듬 |
[예시]
<script>
'use strict';
const createNode = function(){
const elNode = document.getElementById('el');
const newNode = document.createElement('p'); //<p></p>
newNode.innerHTML = '<b>🎃새로운 요소🎃</b>'//<p><b>🎃새로운 요소🎃</b></p>
document.body.insertBefore(newNode, elNode);
//부모인 body안에 들어있는 elNode앞에 newNode을 추가
}
const createAtrr = function(){
const attr = document.getElementById('attr');
const newAttr = document.createAttribute('style'); //style = ""
newAttr.value = 'color: deepskyblue; background-color:gold;'; //style = "color : deepskyblue"
attr.setAttributeNode(newAttr);
//<p id="attr" style = "color : deepskyblue"; background-color:gold;>이 단락에 새로운 속성이 추가됩니다.</p>
}
const createText = function(){
const textNode = document.getElementById('text'); //<p id="text"></p>
const newText = document.createTextNode('🎁🥞🍰🎁🥞🍰');
textNode.appendChild(newText); //<p id="text">🎁🥞🍰🎁🥞🍰</p>
}
</script><body>
<h2>노드의 생성</h2>
<p id="el">새로운 문장이 이 문장 앞에 추가됩니다.</p>
<p id="attr">이 단락에 새로운 속성이 추가됩니다.</p>
<p id="text"></p>
<button onclick='createNode()'>요소 노드 생성</button>
<button onclick='createAtrr()'>속성 노드 생성</button>
<button onclick='createText()'>텍스트 노드 생성</button>
</body>[결과]
노드의 생성
새로운 문장이 이 문장 앞에 추가됩니다.
이 단락에 새로운 속성이 추가됩니다.
3. 노드 제거
| 메소드명 | 설명 |
| removeChild() | - 자식 노드 리스트에서 특정 자식 노드를 제거 - 성공적으로 노드가 제거되면 노드를 반환 - 노드가 제거될 때에는 제거되는 노드의 모든 자식들도 다 같이 제거됨 |
[예시]
<script>
'use strict';
const removeNode = function(){
const parent = document.getElementById('list');
const removeItem = document.getElementById('item');
const result = parent.removeChild(removeItem); //list에서 item이 id인 요소 삭제
console.log(result);
}
const removeAttr = function(){
const js = document.getElementById('js');
js.removeAttribute('style'); //id가 js인 요소들 중에서 style 속성 제거
}
</script><body>
<h2>노드 제거</h2>
<div id="list">
<p>HTML</p>
<p id="item">CSS</p>
<p id="js" style="background-color: gold; color: deeppink;">JavaScript</p>
</div>
<button onclick="removeNode()">요소 노드 삭제</button>
<button onclick="removeAttr()">속성 노드 삭제</button>
</body>[결과]
노드 제거
HTML
CSS
JavaScript
4. 노드 복제
| 메소드명 | 설명 |
| cloneNode() | 기존의 존재하는 노드와 동일한 새로운 노드를 생성하고 반환 |
복제할노드.cloneNode(자식노드복제여부);
true : 복제되는 노드의 모든 속성과 자식노드도 같이 복제
false : 속성 노드만 복제하고 자식 노드를 복제하지 않음
[예시]
<script>
'use strict';
const cloneElement = function(){
const parent = document.getElementById('list');
const originItem = document.getElementById('item');
parent.appendChild(originItem.cloneNode(true));
}
</script><body>
<h2>노드 복제</h2>
<h3 id="item">복제된 아이템</h3>
<div id="list">
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>node.js</p>
</div>
<button onclick="cloneElement()">노드복제</button>
</body>
[결과]
노드 복제
복제된 아이템
HTML
CSS
JavaScript
node.js
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
반응형
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 17 로또 추첨 프로그램을 만들어보자 (0) | 2021.07.30 |
|---|---|
| 15 문서객체모델(DOM) (0) | 2021.07.08 |
| 14 주민등록번호 유효성 체크 프로그램을 만들어 보자 (1) | 2021.07.04 |
| 13 window 객체 (0) | 2021.07.03 |
댓글