JavaScript DOM | Document Object Model 문서객체모델

DOM

Document Object Model

문서 내용들을(태그들을) 객체로 만들어서 사용할 수 있게 함

document를 작성해서 실행하면 구조화된 모델을 갖게되기 때문에
원하는 태그(요소, element)를 선택해서 처리할 수 있게 된다.

script를 이용해 원하는 태그 추가/ 속성 변경/ 스타일 변경 등등
다양한 작업 처리 가능

 

---

원하는 태그 탐색 방법을 간단히 알아볼 것

 

1) QuerySelector

: 해당 태그 전부 탐색

 

ex) css표현식을 통해 원하는 태그를 모두 찾아온다

document.querySelectorAll("#test"); 

-id가 test인 태그를 모두 탐색한다

-> id로 탐색하면 해당 element를 가져오는 것

 

 

2) getElementById

: 아이디로 탐색

-> id는 문서 내 오직 한개만 존재하기 때문에

    하나의 엘리먼트 (element) 선택

 

ex) 

document.getElementById("id명");

"id명"의 element를 가져온다

 

3) getElementsByName

: name 속성으로 element 탐색

name속성은 다수 존재할 수 있으므로

다수의 엘리먼트(elements) 선택

 

ex)

document.getElementsByName("name명")

 

 

4) getElementsByTagName

: tagName으로 element 탐색

tagName은 다수 존재할 수 있으므로

다수의 엘리먼트(elements) 선택

 

ex)

document.getElementsByTagName("태그명");