노드(node)
HTML DOM은 노드 라고 불리는 계층적 단위에 정보를 저장
노드 트리는 노드들의 집합이며 노드간의 관계를 보여줌
노드의 종류
문서 노드(document node) : 문서 전체를 나타내는 노드
요소 노드(element node) : HTML 요소는 요소 노드이며 속성 노드를 가질 수 있는 유일한 노드
속성 노드(attribute node) : HTML 요소의 속성은 속성 노드이며 요소 노드에 관한 정보를 가지고 있음
텍스트 노드(text node) : HTML 문서의 모든 텍스트는 텍스트 노드
주석 노드(comment node) : 모든 주석은 주석 노드
노드간의 관계
parentNode 부모노드
childNodes 자식노드 리스트
firstChild 첫번째 자식노드
lastChild 마지막 자식노드
nextSibling 다음 형제노드
previousSibling 이전 형제노드
노드 추가
appendChild()
새로운 노드를 해당 노드의 자식 노드 리스트의 맨 마지막에 추가
insertBefore()
새로운 노드를 특정 자식 노드 바로 앞에 추가
insertData()
텍스트 노드의 데이터에 새로운 텍스트를 추가
<title>노드의 추가</title>
<script>
const appendNode = function(){
const parent = document.getElementById('list');
const newItem = document.getElementById('item1');
parent.appendChild(newItem);
}
const insertNode = function(){
const parent = document.getElementById('list');
const backend = document.getElementById('backend');
const newItem = document.getElementById('item2');
parent.insertBefore(newItem,backend);
}
const appendText = function(){
const text = document.getElementById("text").firstChild;
text.insertData(7,"너무 피곤한 ")
}
</script>
</head>
<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">지금 시간은 오전 10시 38분 입니다.</p>
<hr>
<button onclick="appendNode();">노드추가1</button>
<button onclick="insertNode();">노드추가2</button>
<button onclick="appendText();">텍스트 추가</button>
</body>
노드 생성
createElement()
새로운 요소 노드를 만든다
createAttribute()
새로운 속성 노드를 만든다
createTextNode()
새로운 텍스트 노드를 만든다
<title>노드의 생성</title>
</head>
<body>
<h2>노드의 생성</h2>
<p id="el">새로운 문장이 이 문장 앞에 추가됨</p>
<p id="attr">이 단락에 새로운 속성이 추가됨</p>
<p id="text"></p>
<button onclick="createNode();">요소노드생성</button>
<button onclick="createAttr();">속성노드생성</button>
<button onclick="createText();">텍스트노드생성</button>
</body>
<script>
const createNode = function(){
const elNode = document.getElementById('el');
const newNode = document.createElement('p'); //<p></p>
newNode.innerHTML = "<b>🍗새로운 요소🍗</b>"
document.body.insertBefore(newNode,elNode);
}
const createAttr = function(){
const attr = document.getElementById("attr");
const newAttr = document.createAttribute('style'); // style=""
newAttr.value = "color:deepskyblue; background-color:deeppink;"
attr.setAttributeNode(newAttr);
}
const createText = function(){
const textNode = document.getElementById("text");
const newText = document.createTextNode("🍕🍔🍣🌮🥓")
textNode.appendChild(newText);
}
</script>
노드 제거
removeChild()
자식 노드 리스트에서 특정 자식 노드를 제거
성공적으로 노드가 제거되면 제거되는 노드를 리턴
노드가 제거될 때에는 제거되는 노드의 모든 자식들도 함께 제거됨
<title>노드의 제거</title>
</head>
<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>
<p>TypeScript</p>
</div>
<button onclick="removeNode();">요소 노드 삭제</button>
<button onclick="removeAttr();">속성 노드 삭제</button>
</body>
<script>
const removeNode = function(){
const parent = document.getElementById("list");
const removeItem = document.getElementById("item");
const result = parent.removeChild(removeItem);
console.dir(result);
}
const removeAttr = function(){
const js = document.getElementById("js");
js.removeAttribute("style");
}
</script>노드 복제
cloneNode()
기존에 존재하는 노드와 동일한 새로운 노드를 생성하고 리턴
매개변수에 true를 넘겨주면 복제되는 노드의 모든 속성과
자식 노드도 같이 복제
매개변수에 false를 넘겨주면 속성 노드 까지만 복제하고
자식 노드는 복제하지 않음(default)
<body>
<h2>노드의 복제</h2>
<h3 id="item">복제된 아이템</h3>
<div id="list">
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>TypeScript</p>
</div>
<button onclick="cloneElement()">노드복제</button>
</body>
<script>
const cloneElement = function(){
const parent = document.getElementById("list");
const originItem = document.getElementById("item");
//매개변수에 아무것도 넘기지 않으면 자동으로 false
// const cloneItem = originItem.cloneNode(false);
const cloneItem = originItem.cloneNode(true);
parent.appendChild(cloneItem);
}
</script>'Language > JavaScript(web)' 카테고리의 다른 글
| [javascript] 프로토타입, 객체종류, 콜백 함수 (0) | 2023.06.07 |
|---|---|
| [javascript] 변수의 범위, 화살표 함수, 객체 (0) | 2023.06.07 |
| [javascript] 제어문, 배열, 함수 (1) | 2023.06.07 |
| [javascript] 연산자, 제어문 (0) | 2023.06.07 |
| [javascript] 대화상자, 연산자 (0) | 2023.06.07 |
