DOM&EVENT, 노드에 접근하기 _ 코딩앙마

유튜브 코딩앙마 영상을 보고 정리한 내용입니다.

DOM 은 Document Object Model 의 약자입니다. html 문서의 각 요소들을 tree 형식으로 표현해주는 데 이를 DOM TREE 라고 합니다.

트리구조에서 하나의 개체를 노드라고 부릅니다. 트리에서 위쪽은 부모노드, 아래쪽은 자식노드라고 합니다. 도큐먼트를 제외한 최상단의 html 은 root node 가 됩니다.

모든 html 태그는 document 객체로 접근하고 제어할 수 있습니다.

document.documentElement // html 에 접근
document.body // body 태그에 접근
document.head // head 태그에 접근

document.body.style - 스타일이 담긴 객체 확인
document.body.style.backgroundColor = "red" - 배경 색 변경
document.body.style.opacity = "0"; - 투명도 조절
document.body.style.padding = "100px"; - 패딩 조절

id 접근
document.getElementById('idName');
태그 이름 접근
document.getElementsByTagName('p');
클래스 이름 접근
document.getElementsByClassName('link')

여러개의 p 값을 선택하면 해당 값을 배열 모양을 반화하는데 배열은 아닙니다.
배열처럼 생긴 리터럴한 컬렉션이라서 배열처럼 호출하거나 갯수를 확인할 수 있습니다.
pList[1] - 이렇게 호출할 수 있고
pList.length - 갯수도 알 수 있긴 함
array 메소드는 사용할 수 없어서 아래처럼 for of 로 순회하며 값을 적용할 수 있습니다.

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

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

아래와 같은 선택 방법도 많이 사용합니다.

document.querySelectorAll('.link') //class 명으로 선택 가능
document.querySelector(#first); //id 는 앞에 #을 붙여서
                       
document.querySelector('h3:nth-of-type(2)') 
// 이렇게 하면 두번째 h3 태그만 선택

document.querySelector('h3:nth-of-type(2)').style.color = 'red';
// 이렇게 색 변경 가능

document.querySelector('p:nth-of-type(2n)') 
// 2n 이라고 하면 짝수번째 것들만 선택