1. DOM

  - 문서 객체 모델(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스다.

  - 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들의 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

  - 새로운 HTML의 요소나 속성을 추가 및 삭제를 할 수 있으며, HTML요소, 속성, 그리고 CSS 스타일을 변경할 수 있다.

 

2. DOM의 종류

  1. Core DOM : 모든 문서 타입을 위한 DOM 모델
  2. HTML DOM : HTML 문서를 위한 DOM 모델
  3. XML DOM : XML 문서를 위한 DOM 모델

 

3. Document 

  - Document 객체는 웹 페이지 그 자체를 의미한다.

  - 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 Document 객체부터 시작해야 한다.

 

4. DOM 접근 메서드

4-1 document.getElementsByTagName("Tag name")

<html>
    <body>
        <p>first</p>
        <p>second</p>
        <p>third</p>
        <script>
        var index = document.getElementsByTagName('p'); // first, second, third
        for(var i = 0; i < index.length; i++){ //index.length = 3 
            index[i].style.color='red';
        }
        </script>
    </body>
</html>

  - 해당 태그를 가진 모든 요소를 선택한다. 선택된 요소는 유사 배열 객체로 반환한다.

 

4-2 document.getElementsByClassName("class name")

<html>
    <body>
        <p class="a">first</p>
        <p class="a">second</p>
        <p>third</p>
        <script>
            var index = document.getElementsByClassName('a'); // first, second
            for(var i = 0; i < index.length; i++){ // index.length = 2
                index[i].style.color = 'red';
            }
        </script>
    </body>
</html>

  - 해당 클래스를 가진 모든 요소를 선택한다. 선택된 요소는 유사 배열 객체로 반환한다.

 

4-3 document.getElementById("id name")

<html>
    <body>
        <p id="a">first</p>
        <p>second</p>
        <p>third</p>
        <script>
            var index = document.getElementById('a');
            index.style.color = 'red';
        </script>
    </body>
</html>

  - 해당 id를 가진 요소 하나를 반환한다.

 

4-4 document.querySelector("selector")

<html>
    <body>
        <p>first</p>
        <p>second</p>
        <p class = 'a'>third</p>
        <script>
            var index = document.querySelector('p'); //first
            index.style.color = 'red';
            var index = document.querySelector('.a'); //third
            index.style.color = 'green';
        </script>
    </body>
</html>

  - 해당 선택자를 만족하는 요소 하나를 반환한다.

  - '.a'는 Element중 class 값이 'a'인 Element들을 선택하는 선택자다.

 

4-5 document.querySelectorAll("selector")

<html>
    <body>
        <p>first</p>
        <p>second</p>
        <p>third</p>
        <script>
            var index = document.querySelectorAll('p');
            for(var name in index){
                index[name].style.color = 'red';
            }
        </script>
    </body>
</html>

  - 해당 선택자를 만족하는 모든 요소들을 반환한다. 선택된 요소는 유사 배열 객체로 반환된다.

 

저작자표시 비영리

'FrontEnd > Javascript' 카테고리의 다른 글

[Javascript] var, let, const  (0) 2021.08.13
[Javascript] this 키워드, 객체의 프로퍼티 삭제  (0) 2021.08.09
[Javascript] 함수(function)  (0) 2021.08.07
[Javascript] 배열(array)  (0) 2021.08.06
[Javascript] 객체  (0) 2021.08.04

티스토리툴바