자바스크립트 DOM & EVENT

✅ 노드에 접근하기

DOM (Document Object Model) 

• html문서의 각 요소를 TREE형식으로 만듦(아래와 같은 계층적 구조를 노드트리라고 부름) 
• js를 이용해서 이를 생성,수정,삭제 할 수 있음
• 하나의 객체를 노드라고 부름
• 최상단의 document를 제외하고 맨 위에 있는 노드를 루트노드라고 부름

• 모든 html 코드는 객체
• document.body  = body에 접근 가능

# 노드 찾기
el = document.getelementbyid('first');   ----- id는 1개만 쓸 수 있음 > element 단수형
plist = document.getelementsbytagname('p')  ----- p태그는 여러번 쓸 수 있음 > elements 복수형
						모든 p태그에 접근
                        
* plist > for (p of plist)로 작성 가능

*getelementsby를 이용하면 classname 이나 name으로 노드에 접근할 수 있음

* document.getelementsbyclassname('link');
= document.queryselectorall('.link');    ---------- css문법 / 모든 노드를 가지고 옴
document.queryselector('.link');         ---------- 제일 처음의 노드만 가지고 옴

* document.queryselector('h3:nth-of-type(2)');         ----- 2번째 h3만 찾음
plist = document.queryselector('h3:nth-of-type(2n)');  ----- 짝수번째 p만 찾음

• nodelist는 arrary가 아님 / index를 통해 각 노드에 접근이 가능함 
• array가 아니기 때문에 push,pop,filter,join 사용불가능

🆕 노드의 종류

• html 문서의 모든 것은 노드

✅ 부모, 자식, 형제 노드

document.queryselectorall('p') > nodelist(4) > 한번 저장된 값을 계속 사용
document.getelementsbytagname('p') > htmlcollection(4) > 노드의 변경사항이 실시간으로 변경
아닌 경우도 있음

• 부모노드

document.documentelement; --- html 
document.documentelement.parentnode; --- 부모노드 중 모든 노드 반환
document.documentelement.parentelement --- 부모노드 중 요소노드만 반환

• 자식모드

ul.childnode; nodelist > 공백과 text모두 포함 / 모든 type의 노드
ul.childten; htmlcollection > 요소 type의 노드 / 실시간 반영 동작

ul.firstelementchild; > 첫번째 요소 노드  
ul.lastelementchild; > 마지막 요소 노드

• 형제노드

이전 형제 / 다음 형제로 나뉨
previoussibling / nextsibling > 형제 노드 중 모든 type

🆕 노드의 관계

• 노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있음
• 루트노드를 제외한 모든 노드는 단 하나의 부모노드를 가짐
• 모든 요소 노드는 자식노드를 가질 수 있음 
• 형제 노드(sibling node)란 같은 부모 노드를 가지는 모든 노드를 말함

✅ 노드 생성, 추가, 복제, 삭제

• 노드 생성/추가

.nodevalue 이용하면 텍스트 변경할 수 있음
> 모든 노드가 가지고 있지만, text노드가 아니면 null을 반환

textcontnent 를 사용하면 text가 아니라도 변경 가능하지만 마크업이 날아감
> innerhtml을 사용하면 마크업을 적용할 수 있음 > 하지만 요소를 추가할 때마다 적어줘야 함

newli = document.createlement('li')   --- 새로운 li 만들기
newli; > <li></li>;
newli.innerhtml = 'green'; > 'green'
newli; > <li>green</li>;
ul.appendchild(newli);  ----- 만든 newli를 ul로 추가함(자식노드를 만들기 위해 innerhtml이용)

# 그래서 아래 사용 #

newli2 = document.createlement('li')   --- 새로운 li 만들기
newtext = document.createtextnode('pink')   --- 새로운 노드 만들기
newli2.appendchild(newtext)   --- li에 넣기
ul.appendchild(newli2)

appendchild는 항상 지정한 부모노드에 가장 마지막 자식으로 추가
> 원하는 위치에 추가하려면 특정한 노드를 지정한 뒤 그 노드 앞에 추가해야 함 > insertbefore 사용
newli3= document.createlement('li')
textnode3 = document.createtextnode('black') 
newli3.appendchild(textnode3)
const red = document.getelementbyid('red');
ul.insertbefore(newli3, red)   --- red앞에 li를 넣어라

• 노드 복제

clonenode 이용
newblack = newli3.clonenode();
ul.appendchild(newblack);
newblack2 = newli3.clonenode(true);   ---- 자식 노드까지 다 복제됨 
or ( ) / (false)                      ---- 자신만 복제

• 노드 삭제

removechild
ul.removechild(red);
ul.removechild.firstelementchild;
ul.removechild.lastelementchild;

✅ CSS style, class 제어

# style
box.style.backgroundcolor = "red";

# class
box.classname ='bg-blue';  --- background
box.classname ='txt-pink'; > bg 사라짐
>> box.classname ='bg-blue txt-pink'; > 둘 다 적용 됨 / 많아지면 번거로움

# 그래서 아래 사용 #

# add, remove
box.classlist.add('text-white');
box.classlist.remove('text-white');
box.classlist.add('bg-green', 'txt-yellow'); > 여러개 적용

# replace
box.classlist.replace('bg-blue', 'bg-red');

# toggle 해당 class를 넣었다 뺐다 
setinterval(()=>{
	box.classlist.toggle('bg-red')
}, 1000)

✅ 이벤트 핸들러(Event Handler)

<button onclick="alert('click')">클릭1</button>
<button onclick="sayhello">클릭2</button>
<button id="btn">클릭3</button>
<button id="btn2">클릭4</button>

function sayhello() {
	alert("hello")
}

const el = document.getelementbyid("btn");
el.onclick = sayhello;

const el2 = document.getelementbyid("btn2");
el.addeventlistener("click",sayhello);   --- 특정이벤트가 발생하면 전달된 함수를 실행
el.addeventlistener("click",() => {
	alert("hi");
}

# addeventlistener  ----- removeeventlistener 도 있음
html과 구별지을 수 있음
일부 이벤트는 항상 이걸로 처리해야 함 -- domcontentloaded가 되면 발생
document.addeventlistener("domcontentloaded", () => {
	document.body.style.backgroundcolor = "red";
});

• 자주 사용하는 event

# dbclick -- 더블클릭할 때
const el = document.getelementbyid("btn");
el.addeventlistener("dbclick",sayhello);    

# keyup -- 글자가 입력하면 콘솔이 찍히게 함
const input = document.getelementbyid("txt");
input.addeventlistener("keyup", (event) => {
	console.log(event.key);
};

# focus -- input창에 focus가 발생할 때 
const input = document.getelementbyid("txt");
input.addeventlistener("focus", () => {
input.style.backgroundcolor = "rgba(255,0,0,0.2)";

# blur -- focus를 잃을 때
input.addeventlistener("blur", () => {
input.style.backgroundcolor = null;

# mousemove -- 마우스를 움직일 때
const box = document.getelementbyid("box")
const circle = document.getelementbyid("circle")
box.addeventlistener("mousemove", event => {
	circle.style.top = `${event.clientY}px`;  --- 원을 만들어서 움직일 때 따라다님
    circle.style.left = `${event.clientX}px`;
})

# resize -- 창 크기가 바뀔 때, 높이와 너비 변경
window.addeventlistener("resize", () => {
	document.body.innertext = `현재 창 크기는 ${window.innerwidth} x ${window.innerheight}`;
});

✅ 이벤트 버블링, 이벤트 위임

• 하위요소(자식요소)에서 상위요소(부모요소)로 올라감 = 이벤트 버블링
• 버블링 X =focus, blur, mouseenter, mouseleave
• 버블링O => focusin, focusout, mouseover,mouseout 
• 인위적으로 막을 수 있음 = stoppropagation

• 이벤트 위임 : 자신에게 발생하는 이벤트를 다른 요소에서 처리 => clickhandler 
• even.target : 이벤트를 발생시키는 요소
• event.currenttarget : 이벤트 핸들러가 등록된 요소

 

 

참고 영상 : ✅ 자바스크립트 DOM & EVENT

참고 사이트 : 🆕 http://www.tcpschool.com/javascript/js_dom_node

코딩교육 티씨피스쿨