노드(node)
HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장
노드 종류
문서 노드: 문서 전체를 나타내는 노드
요소 노드: HTML 모든 요소는 요소노드이며, 속성노드를 가질 수 있음
속성 노드: HTML 모든 요소는 속성노드이며, 속성노드에 관한 정보를 가지고 있음
텍스트 노드: HTML 모든 텍스트는 텍스트노드
주석 노드: HTML 모든 주석은 주석노드노드의 관계
parentNode: 부모 노드
children: 자식 노드
childNodes: 자식 노드 리스트
firstChild: 첫번째 자식 노드
firstElementChild: 첫번째 자식 요소 노드
lastChild: 마지막 자식 노드
nextSibling: 다음 형제 노드
previousSibling: 이전 형제 노드# 노드 예제
<body>
<script>
function appendNode(){
const parent = document.getElementById('list');
console.log(parent);
const newItem = document.getElementById('item1');
console.log(newItem);
// appendChilde(): 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
parent.appendChild(newItem);
}
function insertNode(){
const parent = document.getElementById('list');
const backend = document.getElementById('backend');
const newItem = document.getElementById('item2');
// insertBefore(): 새로운 노드를 특정 자식 노드 바로 앞에 추가
parent.insertBefore(newItem, backend);
}
function appendText(){
const text = document.getElementById('text').firstChild;
console.log(text)
// insertDate(): 새로운 노드를 텍스트 데이터로 추가
text.insertData(7, '아주 피곤한 수요일 ');
}
function createNode(){
const newItem = document.getElementById('item1');
// createElement(): 새로운 요소 노드를 만듬
const newNode = document.createElement('p'); // <p></p>
// <p><strong>😀 새로운 요소가 추가됨!</strong></p>
// innerHTML: HTML요소와 텍스트를 삽입
// innerText: 텍스트만 삽입
newNode.innerHTML = '<strong>😀 새로운 요소가 추가됨!</strong>'
document.body.insertBefore(newNode, newItem);
}
function createAttr(){
const newItem = document.getElementById('item2');
// createAttribute(): 새로운 속성 노드를 만듬
const newAttr = document.createAttribute('style'); // style=''
// style='color:deeppink; background-color:gold;'
newAttr.value = 'color:deeppink; background-color:gold;';
// <p id="item2" style='color:deeppink; background-color:gold;'>React</p>
newItem.setAttributeNode(newAttr);
}
function createText(){
const textNode = document.getElementById('ct');
// createTextNode(): 새로운 텍스트 노드를 만듬
const newText = document.createTextNode('😀😉😎😍🤣😍🤗😴🤩')
textNode.appendChild(newText);
}
function removeNode(){
const parent = document.getElementById('list');
const removeItem = document.getElementById('backend');
// removeChild(): 자식 노드 리스트에서 특정 자식 노드를 제거. 노드가 제거되면 해당 노드를 반환. 노드가 제거될 대 노드의 자식들도 다같이 제거
const result = parent.removeChild(removeItem);
console.log(result);
}
function removeAttr() {
const newItem = document.getElementById('item2');
// removeAttribute(): 특정 속성 노드를 제거
newItem.removeAttribute('style');
}
function cloneElement(){
const parent = document.getElementById('list');
const originItem = document.getElementById('cl');
// cloneNode(): 기존에 존재하는 노드와 동일한 새로운 노드를 생성하여 반환(true: 자식까지 복사, false: 자식은 복사x)
parent.appendChild(originItem.cloneNode(true));
}
</script>
<h2 id="cl">노드</h2>
<div id="list">
<p id="backend">node.js</p>
<p>HTML</p>
<p>CSS</p>
</div>
<p id="item2">React</p>
<p id="item1">JavaScript</p>
<hr>
<p id="text">현재 시간은 오후 3시</p>
<button onclick="appendNode()">노드추가1</button>
<button onclick="insertNode()">노드추가2</button>
<button onclick="appendText()">텍스트노드추가</button>
<hr>
<p id="ct"></p>
<hr>
<button onclick="createNode()">노드생성</button>
<button onclick="createAttr()">속성노드생성</button>
<button onclick="createText()">텍스트노드생성</button>
<hr>
<button onclick="removeNode()">노드삭제</button>
<button onclick="removeAttr()">속성노드삭제</button>
<hr>
<button onclick="cloneElement()">노드복제</button>
</body>
</html>
'Web' 카테고리의 다른 글
| [ JS ] 정규표현식 + 회원가입 페이지 만들기 예제 (1) | 2024.04.18 |
|---|---|
| [ JS ] 객체의 종류 (0) | 2024.04.18 |
| [ JS ] Math (0) | 2024.04.18 |
| [ JS ] 객체 ( Object ) / 프로토타입 ( Prototype ) (0) | 2024.04.18 |
| [ JS ] 사용자 정의 함수 ( Function ) (0) | 2024.04.18 |