DOM : Node에 접근하는 방법 (id, class, tag 접근 및 style 제어)

✅ 오늘 배운것

* [] 대괄호 안에 있는것은 수정이 가능한 부분입니다. 사용할땐 대괄호만 제거해주시면 됩니다.

 

1. document.[documentElement] 

* HTML에 접근하는 방법이다.

document.body
document.head

 

2. const [Variable] = document.getElementsTagName(['div'])

* 태그에 접근할수 있는 변수를 만든다.

* 태그는 for of문 으로 순회할 수 있다.

const divBox = document.getElementsByTagName('div')

for(div of divBox){
	div.style.borderbox = '1px, solid, #000'
    }

 

3. const [Variable] = document.getElementById('[id]')

* id 선택자에 접근할수 있는 변수를 만든다.

const menuBtn = documentGetById('menuBtn')

 

4. const [Variable] = document.getElementByClassName('[class]')

* class 선택자에 접근할수 있는 변수를 만든다.

const on = document.getElementsByClassName('on')

 

5. const [Variable] = document.querySelectorAll('TagName')

* HTML내부에 지정한 선택자 및 태그에 모두 접근할수있다.

* class 를 지정할때는 앞에 dot(.)을 붙여주고 id를 지정할때는 #을 붙여준다.

const [Variable] = document.querySelectorAll('TagName')
const [Variable] = document.querySelectorAll('.className')
const [Variable] = document.querySelectorAll('#idName')

✅ querySelector 와 다른점

* querySelectorAll 은 지정한 태그및 선택자를 모두 접근할수 있는반면 querySelector는 최상단 노드에만 접근할 수 있다.

 

 

6. document.[div].style.[margin] = ['10px']

* style을 제어하는 방법이다.

const divbox = document.querySelectorAll('div')
document.divbox.style.margin = '50px'