[JavaScript] 문서 객체 모델(DOM)

 

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.

 

---

 

1.DOM (Document Object Model)

HTML, XML 문서의 구조화된 표현을 제공하며,
프로그래밍 언어가 이 구조를 조작할 수 있도록 하는 인터페이스

 

 

 

 

2.DOM tree

document 객체를 최상위 노드(루트 노드)로 둔 문서를 트리구조로 표현한 형태
각 노드는 요소(HTML 태그), 속성, 텍스트등을 나타낸다.
웹에서 개발자도구 -> Elements -> properties에서 DOM트리를 확인가능하다.

document
├── html
    ├── head
    │   └── title
    │       └── "Sample Page"
    └── body
        ├── h1
        │   └── "Hello, World!"
        └── p
            └── "This is a sample page."

 

 

 

 

 

 

 

3.DOM Query 

3-1.하나의 요소

document.getElementById(id)

id속성값으로 첫번째 요소만 반환

<script>
    function fun1(){
        document.write(document.getElementById('aa').textContent+"나")
    }
    
</script>

<a id="aa">나</a>
<button onclick="fun1()"></button>

 

 

document.querySelector(cssSelector)

CSS셀렉터를 사용해 첫번째 요소만 반환 

<script>
    function fun2(){
        document.write(document.querySelector('.testclass').textContent+"니")
    }
    
</script>

<a id="aa" class="testclass">나</a>
<button onclick="fun2()">버2</button>

 

 

 

 

3-2.여러개 요소

document.getElementsByClassName(class)

class값으로 모든 요소를 선택
공백으로 여러개의 class 지정가능

<script>
    function fun3(){
        const ele=document.getElementsByClassName('test2')
        for(let i=0; i < ele.length; i++){
            ele[i].textContent="으"
        }

    }
</script>

<a class="test2">안</a>
<a class="test2">녕</a>

<button onclick="fun3()">버3</button>

 

 

 

document.getElementsByTagName(tagName)

태그명으로 모두 선택

<script>
    function fun4(){
        const ele=document.getElementsByTagName('a')
        for(let i=0; i < ele.length; i++){
            ele[i].textContent="으"
        }

    }
</script>

<a class="test2">안</a>
<a class="test2">녕</a>

<button onclick="fun4()">버4</button>

 

 

 

document.querySelectorAll(selector)

CSS 선택자를 사용하여 요소 노드를 모두 선택

 

<script>

    function fun5(){
        const ele=document.querySelectorAll('a')
        for(let i=0; i < ele.length; i++){
            ele[i].textContent="으"
        }

    }

</script>

<a class="test2">안</a>
<a class="test2">녕</a>

<button onclick="fun4()">버5</button>

 

 

 

 

 

 

4.탐색

4-1.parentNode

부모 노드 탐색

 

 

 

4-2.firstChild, lastChild

자식 노드 탐색

 

 

4-3.hasChildNodes()

자식노드 여부 확인 (boolean 리턴)

 

 

4-4.childNodes

자식노드들 반환

 

 

 

4-5.children

자식노드중 element type 요소만 반환

 

 

 

4-6.previousSibling, nextSibling

형제 노드를 탐색

 

 

 

 

4-7.previousElementSibling, nextElementSibling

형제노드중 Element type 요소만 탐색

 

 

 

 

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/js-dom#33-dom-traversing-%ED%83%90%EC%83%89