1. 노드 메서드
(1) 노드 추가 (있는 애를 이동)
appendChild() : 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
insertBefore(넣어줄애,기준점) : 새로운 노드를 특정 자식 노드 바로 앞에 추가
insertData(인덱스,넣을값) : 새로운 노드를 텍스트 데이터로 추가
(2) 노드 생성 (없던 애를 생성)
createElement(요소명) : 새로운 요소 노드를 만듦
createAttribute() : 새로운 속성 노드를 만듦
createTextNode() : 새로운 텍스트 노드를 만듦
(3) 노드 제거
removeChild() : 자식 노드 리스트에서 특정 자식 노드를 제거, 노드가 제거되면 해당 노드를 반환. 노드가 제거될때 노드의 자식들도 다같이 제거
removeAttribute() : 특정 속성 노드 제거
(4) 노드 복제
cloneNode(true/false) : 기전의 존재하는 노드와 동일한 새로운 노드를 생성하여 반환(복붙st)
true면 자식까지 복사
<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>
<h3 id="item1">JavaScript</h3>
<hr>
<p id="text">현재 시간은 오전 10시 30분입니다</p>
<hr>
/* 버튼을 누르면 함수 실행 */
<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>
function appendNode(){
const parent = document.getElementById('list')
console.log(parent)
const newItem = document.getElementById('item1')
console.log(newItem)
// list div에 item을 붙이기
parent.appendChild(newItem)
// <h3 id="item1">JavaScript</h3>이 위로 올라감
}
function insertNode(){
const parent = document.getElementById('list')
const backend = document.getElementById('backend')
// item2를 선택해서 backend 앞에 넣기
const newItem = document.getElementById('item2')
parent.insertBefore(newItem,backend)
}
function appendText() {
// 텍스트 가져오기
const text = document.getElementById('text').firstChild
console.log(text)
// text.insertData가 먼저 적용되고 랜더링이 적용되고나서 결과값이 찍히기때문에
//'현재 시간은 아주아주 피곤한 월요일 오전 10시 30분입니다'가 출력
text.insertData(7,'아주아주 피곤한 월요일 ')
//console.log(text)
}
현재 시간은 오전 10시 30분입니다 >
현재 시간은 아주아주 피곤한 월요일 오전 10시 30분입니다 로 변경.
function createNode(){
const newItem = document.getElementById('item1')
const newNode = document.createElement('p') // 가상으로 p태그 만들어달라는 소리
newNode.innerHTML = '<b>😘새로운 요소가 나타났다</b>'
// newNode.innerHTML = HTML 요소와 텍스트 삽입
// newNode.innerText = 텍스트만 삽입
document.body.insertBefore(newNode,newItem) // body안의 newItem앞에 newNode생성
}
// 새로운 텍스트 추가
function createText(){
const textNode = document.getElementById('ct')
const newText = document.createTextNode('텍스트 추가')
textNode.appendChild(newText) // p태그 안에다가 추가
}
function createAttr(){
const newItem = document.getElementById('item2')
const newAttr = document.createAttribute('style') // style 속성생성
newAttr.value = 'color:red; background-color:gold'
newItem.setAttributeNode(newAttr)
}
function removeNode(){
const parent = document.getElementById('list')
const removeItem = document.getElementById('backend')
const result = parent.removeChild(removeItem)
console.log(result)
}
function removeAttr(){
const newItem = document.getElementById('item2')
newItem.removeAttribute('style')
}
function cloneElement(){
const parent = document.getElementById('list')
const originItem = document.getElementById('cl')
parent.appendChild(originItem.cloneNode(true)) // True는 자식까지 복사하란 의미
}
'웹 > JavaScript' 카테고리의 다른 글
이벤트(Event) (0) | 2023.10.30 |
---|---|
정규 표현식 (1) | 2023.10.29 |
Form객체/Document 객체 등 (1) | 2023.10.29 |
Interval, Timeout 함수 (0) | 2023.10.28 |
프로토타입/상속 (0) | 2023.10.28 |