Language/Javascript (Typescript)

[Javascript] DOM(document object model)

ooeunz 2019. 10. 10. 18:18
반응형

Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. window 객체의 document 프로퍼티를 통해서 사용할 수 있다. Window 객체가 을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다.

 

제어 대상 찾기

getElement

document.getElementsByTagName : 문서 전체에 해당 tag를 찾는다.

document.getElementsByClassName : 문서 전체에서 해당 class를 찾는다.

document.getElementById : 문서 전체에서 해당 id를 찾는다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    var lis = document.getElementsByTagName('li');
    for(var i=0; i < lis.length; i++){
        lis[i].style.color='red';   
    }
</script>
</body>
</html>
cs

위의 코드와 같이 getElementsByTagName을 이용해서 문서 전체의 li태그를 찾아내어 색을 red로 동적으로 변화시킨다.

 

querySelector

querySelector역시 getElement와 비슷하지만 css선택자의 문법을 이용하여 객체를 조회할 수 있다는 차이가 있다.

또한 document.querySelector.all과 같이. all을 붙이면 getElement와 같이 유사 배열에 객체들을 담지만, querySelector만 단독적으로 사용한다면 제일 첫 번째 나온 객체만을 리턴한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ol>
    <li>HTML</li>
    <li class="active">CSS</li>
    <li>JavaScript</li>
</ol>
 
<script>
    var li = document.querySelector('li');
    li.style.color='red';
    var li = document.querySelector('.active');
    li.style.color='blue';
</script>
</body>
</html>
cs

 

DOM Tree

위의 getElements와 같은 메서드를 이용하면 객체들을 조회할 수 있다. 이런 객체들은 무엇일까?

조회해보면 알겠지만 이러한 객체들은 복수인지 단수인지, 복수일 때는 html collection이라는 객체에 담아서 리턴하는 등 엘리먼트의 종류에 따라서 리턴되는 객체가 조금씩 다는 것을 알 수 있다.

 

이러한 객체들은 상속관계를 띄고 있는데, 모든 엘리먼트는 HTMLElement의 자식이다. 따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다. 동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고 있는데 이것은 엘리먼트의 성격에 따라서 달라진다. HTMLElement는 Element의 자식이고 Element는 Node의 자식이다. Node는 Object의 자식이다. 이러한 관계를 DOM Tree라고 한다.

 

반응형