* HTML 준비
<header style="height:50px"></header>
<main>
<p class="target1">*기준1*</p>
<p class="target2">*기준2*</p>
</main>
<footer style="height:50px"></footer>
* JS DOM준비
const main = document.querySelector('main')
const target1 = document.querySelector('.target1')
const target2 = document.querySelector('.target2')
Node생성
const create_p = document.createElement('p')* p 요소를 생성한다.
* 생성 후 노드에 삽입하는 자바스크립트의 모든 명령어가 가능하다.
응용1. 생성 후 텍스트노드 삽입형태
create_p.innerHTML = 'test'
Node추가(자식노드)
main.append('0')
main.append('1')* 부모노드.append()
* 부모노드의 마지막 자식 노드 추가
* 문자열, 숫자 등 데이터타입 제한 없이 삽입 가능
main.appendChild(target1)* 부모노드.appendChild()
* 노드객체만 삽입할 수 있다.(문자열 데이터 불가)
* 기존 노드를 삽입할 경우 노드 복제가 되지 않고 위치가 변경된다.
* 일반적으로 신규생성한 노드를 삽입하는 것이 좋다.
const create_p = document.createElement('p') //p태그생성
create_p.innerHTML = 'test' //p태그 내 내용 삽입
main.appendChild(create_p) //생성노드객체 마지막자식노드추가
main.insertBefore(create_p, target1)* 부모노드.이전위치노드생성(생성대상, 기준위치)
* target1 위치 기준 이전 위치에 create_p를 생성한다.
* prepend는 jquery명령으로 공식 javascript는 존재하지 않는다. (append와 연결하여 생각하지 않기!)
Node제거
main.remove()* 노드.remove()
* 노드를 제거한다.
main.removeChild(target1)* 부모노드.removeChild(제거할자식노드)
* 부모노드의 자식노드를 제거한다.
* 부모노드를 찾지 않고 제거는 불가능하다.
Node 선택(부모)
console.log(target1.parentNode)
console.log(target1.parentElement)
console.log(target1.parentNode.parentNode)
console.log(target1.parentElement.parentElement)* 자식노드.parentNode => 텍스트노드 등 요소가 아니어도 대상을 반환한다.
* 자식노드.parentElement => 요소 노드만 선택하여 대상을 반환한다.
* 특정 자식의 부모를 선택한다.
* 부모속성을 연속으로 작성하여 조상노드까지 찾을 수 있다.
target1.parentNode.remove()
target1.parentElement.remove()* 자식노드.parentNode.remove()
* 특정 자식의 부모노드 제거
target1.parentNode.removeChild(target2)* 기준자식.parentNode.removechild(제거할자식노드)
* 특정 기준자식노드를 잡고 해당 부모의 또 다른 자식을 선택하여 제거할 수 있다.
Node 교체
main.replaceChild(create_p, target1)* 부모노드.replaceChild(변경노드, 기준노드)
* 기준노드(target1)가 변경노드(create_p)로 교체된다.
Node 형제
console.log(target1.nextElementSibling)
console.log(target2.previousElementSibling)* 기준형제노드.nextElementSibling
* 기준형제의 다음 형제노드를 반환한다.
* 기준형제노드.previousElementSibling
* 기준형제의 이전 형제노드를 반환한다.
응용1. 다음 형제 제거
target1.nextElementSibling.remove()
응용2. 다음형제의 자식 추가
target1.nextElementSibling.appendChild(create_p)
응용3. 부모의 다음형제 스타일 제어
target1.parentElement.nextElementSibling.style.backgroundColor='yellow'
응용4. 부모의 이전형제 스타일 제어
target1.parentElement.previousElementSibling.style.backgroundColor='red'
Node 자식 유무 확인/자식 개수 확인
console.log(main.hasChildNodes())
console.log(main.childElementCount)* 부모노드.hasChildNodes()
* 부모노드의 자식이 있으면 true, 없으면 false를 반환한다.
* 부모노드.childElementCount
* 부모노드의 자식 수를 반환한다. (1부터 시작)
응용1. 조건문 활용
if(main.hasChildNodes()==true){
alert('자식 노드가 있다')
}
응용2. 반복문 활용 모든 자식 노드 제거하기
노드.childElementCount 활용
while(main.childElementCount){ //카운트 수가 0이 되면 while은 종료된다.
main.removeChild(main.firstElementChild) //첫번째 자식 제거
}
Node 복제
console.log(target1.cloneNode())
console.log(target1.cloneNode(true))* 복제대상.cloneNode() 노드 객체만 복제한다.
* 복제대상.cloneNode(true) 노드 객체와 자식 노드까지 복제한다.
응용1. 부모노드 마지막 자식 위치에 복제 노드 추가
const clone = target1.cloneNode(true)
main.appendChild(clone)