[DOM&EVENT] 01. 노드에 접근하기

DOM은 Document Object Model의 약자. 문서 객체 모델입니다.

DOM은 HTML 문서의 각 요소들을 트리 형식으로 표현해줍니다.

개발자는 자바스크립트를 이용해서 이를 생성하거나 수정하거나 삭제할 수 있습니다. 

돔을 그림으로 표현하면 이렇게 트리 형식의 자료 구조가 됩니다.

출처) www.w3schools.com

이 하나의 객체를 노드라고 부릅니다.

트리에서 위쪽은 부모 노드 아래쪽을 자식 노드라고 합니다.

도큐먼트를 제외하고 최상단에 있는 html은 루트 노드가 됩니다.

 

크롬에서 개발자 도구를 열었을 때 보이는 부분이 바로 돔입니다.

콘솔 창을 열고 하나씩 접근해 보겠습니다. 

document.documentElement

document.documentElement 하면 html에 접근할 수 있습니다.

document.body

document.body를 하면 바디 태그에 접근할 수 있고 헤드도 마찬가지 입니다.

모든 html 태그는 객체입니다. 이 객체는 이렇게 자바스크립트로 접근하고 제어할 수 있습니다.

 

스타일을 바꾸려면 

document.body.style;

document.body.style; 이렇게 하면 객체가 나옵니다.

많은 스타일이 나오는데 이중에 background-color를 "blue";로 바꾸면 배경색이 파란색으로 바뀌는 것을 확인할 수 있습니다.

이 방법이 아닌 직접 작성하는 방법도 있습니다. 

document.body.style.opacity = '0';
document.body.style.opacity = '0.5';
document.body.style.padding = '100px';

이런 식으로 제어할 수 있습니다.

const el = document.getElementById("first");

id가 first인 태그에 id로 접근할 때는 getElementById로 할 수 있습니다. 괄호 안에 따옴표를 적고 안에 해당 아이디를 넣어주면 됩니다. 이렇게 하면 el;했을 때 바로 찾을 수 있고 태그명을 더 잘 찾을 수 있습니다.

const pList = document.getElmentsByTagName('p');

모든 p태그에 접근을 하기 위해서는 getElementsByTagName에 괄호 안에 따옴표를 적고 안에 해당 태그 이름을 적어주면 됩니다. pList를 해보면 해당 태그가 모두 나옵니다.

 

id는 한페이지에 딱 한번만 사용할 수 있기 때문에 getElementById가 되고 s가 없습니다.

반면 p 태그는 여러번 사용해도 되기 때문에 복수형으로 getElements가 됩니다. 

for(p of pList){
	p.style.fontSize = '30px';
}

for(p of pList){
	p.style.opacity = String(Math.random());
}

pList는 for of로 순회할 수 있습니다. 

document.getElementsByClassName('link');

getElementBy를 이용하면 className이나 name으로도 노드에 접근할 수 있습니다.

document.querySelectorAll('link');

 

다음으로 알아볼 검색 메서드는 querySelectorAll입니다.

앞서 'link'라는 class를 가진 요소에 접근을 해보았는데요. 이렇게 해도 동일한 결과를 가져옵니다.

document.querySelector('#first');

당연히 아이디도 이렇게 #으로 적어주면 됩니다. 그러면 동일하게 나오는데 사실 id로 선택하면 어차피 하나만 나오니까 이럴땐  All을 빼고 적어주면 됩니다. querySelector까지만 적으면 하나만 나옵니다.

querySelectorAll은 이름 그대로 모든 노드를 가져오고 querySelector는 딱 하나 제일 처음에 노드만 가지고 옵니다.

document.querySelector('h3:nth-of-type(2)');

css 선택자를 썼을 때 편한 점이 이런 게 있을 수 있겠죠 각 제목 들이 h3로 되어 있을 때 document.querySelector('h3:nth-of-type(2)');이렇게 하면 두 번째 h3만 찾습니다.

document.querySelector('h3:nth-of-type(2)').style.color = 'red';

이렇게 빨간색으로 바꿔 줄 수도 있습니다.

document.querySelectorAll('p:nth-of-type(2n)');

이렇게하면  짝수 p들만 선택됩니다.

for(p of pList){
	p.style.backgroundColor = '#000';
    p.style.color = '#fff';
}

for of로 순회하면 번갈아가며 흑백으로 나오게 됩니다.

 

참고로 지금까지 사용한 메소드로 가져온 결과들은 array처럼 보이지만 사실 array는 아닙니다. pList를 쳐보면 NodeList라고 나옵니다. NodeList는 배열은 아니고 이터너블한 컬렉션입니다. 그래서 for of를 사용하는 것이고

pList[1];

이렇게 index를 통해 각 노드에 접근할 수 있습니다. pList[1]하면  두번째 요소가 나오고 length를 통해 갯수를 알 수 있습니다. 하지만 array가 아니기 대문에 push, pop, filter, join 같은 메소드는 사용할 수 없습니다.