JS-Do it! JS - #6일차

범위: 07. DOM 활용하기

---

DOM 트리 노드를 구성하는 원칙

- 모든 HTML 태그는 요소 노드가 된다.

- HTML태그 사용하는 텍스트 내용은 자식 노드인 텍스트 노드가 된다.

- HTML태그에 있는 속성은 모두 자식 노드만 속성노드가 된다.

- 주석은 주석노드가 된다.

 

노드리스트

DOM에 접근한 때 querySelectorAll()메서드를 사용하면 여러 노드를 한 번에 가져올 수 있다.

이렇게 가져온 다양한 노드 정보를 저장한 것을 노드리스트 라고 한다. (배열 x)

 

웹문서에 새로운 노드 추가하기

- 요소 노드 만들기 - createElement()메서드

let newP = document.createElement("p");

- 텍스트 노드 만들기 - createTextNode(텍스트)메서드

let textNode = document.createTextNode("비빔짬뽕");

- 자식 노드 연결하기 - appendChild()메서드

newP.appendChild(textNode);

body노드에 접근할 때는 document.body라고 하면 된다

document.body.appendChild(newP);

- 속성 노드 만들기 - createAttribute()메서드

let srcNode=document.createAttribute("src");
srcNode.value="images/wall.jpg";

- 속성 노드 연결하기 - setAttributeNode()메서드

newImg.setAttributeNode(srcNode);

- 자식 노드 연결하기 -appendChild()메서드

document.body.appendChild(newImg);

- 기존 노드의 앞에 새 요소 추가하기 -insertBefore()메서드

let tsNode=document.createElement("p");
let tsTextNode = document.createTextNode("깍두기볶음밥");
tsNode.appendChild(tsTextNode);

 

노드 삭제하기

- 요소 삭제하기 -remove()메서드

heading=document.querySelector("hi");
heading.remove();

- 자식 노드 삭제하기 -removeChild()메서드

자식 노드를 삭제하려면 먼저 부모 노드를 찾고, 그 후에 자식 노드를 삭제해야한다

//부모 노드 찾기 
document.querySelector("hi").parentNode

//자식 노드 제거 (부모는 body)
body.removeChild(자식노드);

예시

for(item of items){
	item.addEventListener("click",function(){
    	this.parentNode.removeChild(this);
    });
}

 

this 사용시 주의 점

this는 이벤트가 발생한 노드를 가리킨다.

단, 함수를 화살표 함수로 작성할 경우 this는 window객체를 가리킨다

클릭한 대상을 this라는 예약어로 사용하려면 익명 하뭇 형식으로 지정할 것!

 

 

 

실습

click이벤트가 여러 번 발생해도 이벤트 리스너는 한 번만 실행하는 방법

~.addEventListener("click",()=>{

~,{once:true});