웹브라우저, DOM (Document Object Model)

 

<참조> https://www.boostcourse.org

 

웹브라우저 DOM (Document Object Model) 

 

웹브라우저는 HTML 코드를 DOM 객체 구조로 저장하는데 트리 형태 구조(DOM Tree)이다. 트리 구조는 HTML 요소를 기준으로 관련 정보를 모아서 만들어진다. 자바스크립트가 웹 페이지에서 특정 요소에 접근할 수 있는 것은 이러한 DOM 정보에 접근할 수 있기 때문이다.

 

document 객체에 웹 페이지 정보가 담겨지므로, 우리는 document 객체가 제공하는 기능을 이용할 수 있다.

 

특정 ID에 접근: document.getElementById("특정ID값")  

 

document.getElementById("특정ID값").style.display = "none";  

document.getElementById("특정ID값").style.display = "block";  

 

document.querySelector()를 이용하여 접근할 수도 있는데, 태그명, id명, class명으로 접근하는 방법이 다르다.

 

(1) 태그 접근: document.querySelector("태그명")

(2) id명 접근: document.querySelector("#id명")

(3) class명 접근: document.querySelector(".class명") 

 

1차 접근 후 바로 아래 다른 것을 접근할 때는 ' > '를 이용한다.

 

document.querySelector("1차접근명 > 2차접근명")

 

해당 접근명에 해당 하는 모든 놈을 가져오려면 다음처럼 사용한다.

 

document.queryDelectAll("접근명") 

 

이렇게 전달 받은 값은 for 문을 통해 처리할 수 있다.

 

[그림] DOM 트리 구조 

출처: https://www.boostcourse.org

 

[참고] DOM 

https://en.wikipedia.org/wiki/Document_Object_Model

Document Object Model - Wikipedia