[Javascript] Do it! 자바스크립트 입문 - 문서 객체 모델 DOM

공부단 7일차-1입니다.

 

문서 객체 모델이란?

DOM은 Document Object Model의 줄임말 입니다. DOM의 정의는 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법입니다. 즉, 웹 문서의 텍스트 / 이미지 / 표 등 모든 요소는 모두 객체라는 것 입니다.

 

document

document는 웹 문서 자체를 가리키는 DOM 요소 중 하나입니다.

 

document는 웹 문서 자체를 가리키기 때문에 웹 문서의 요소에 접근해서 수정을 할 수 있습니다.

 

DOM 트리

웹 문서의 태그는 요소 노드로 표현합니다.

태그가 품고있는 텍스트는 해당 요소 노드의 자식 노드인 텍스트 노드로 표현합니다.

태그의 속성은 모두 해당 요소 노드의 자식 노드인 속성 노드로 표현합니다.

주석은 주석 노드로 표현합니다.

 

 

자세한 부분은 여기를 참조 https://ko.javascript.info/dom-nodes

DOM 트리

 

DOM 요소를 id 선택자로 접근하는 함수 - getElementById()

document.getElementById("해당ID값")

 

출력 결과는 해당 id가 가리키는 부분이 어느 부분인지 해당 요소가 출력됩니다.

 

DOM 요소를 class 값으로 찾아내는 함수 - getElementsByClassName()

document.getElementsByClassName("클래스명")

 

자세히 보면 Element 뒤에 복수형 's'가 붙었습니다. 그 이유는 css에서 id의 값은 다 달라야 하지만 class값은 같은게 여러개일 수 있습니다. 그래서 복수형으로 써야합니다. 즉, getElementsByClassName() 함수는 2개 이상의 웹 요소에 접근합니다. 그래서 getElementById()와 다르게 HTMLCollection 값을 출력하는데 배열과 비슷합니다.

 

DOM 요소를 태그 이름으로 찾아내는 함수 - getElementsByTagName()

id, class 선택자가 없는 DOM요소에 접근할 때 사용합니다.

document.getElementsByTagName("tag명")

 

이것도 마찬가지로 HTMLCollection 형태로 출력됩니다.

 

DOM 요소를 다양한 방법으로 찾아주는 함수 - querySelector(), querySelectorAll()

이 함수들은 정말 많이 사용됩니다. 두 함수는 접근하는 DOM 요소 개수에만 차이가 있을 뿐 사용법은 똑같습니다. 두 함수는 id, class, 태그 이름 다 사용 가능합니다. 그런데 이때 css에 style을 적용할 때 사용했던 방법과 같은 방법으로 사용해야합니다.

• id : #
• class : .
• tag : tag명

document.querySelect("#id값")
document.querySelectAll(".class명")
document.querySelectAll("tag명")

 

반환 값은 HTMLCollection이 아닌 NodeList로 표기됩니다. NodeList는 여러 개의 노드를 모아 놓은 것으로 배열과 비슷합니다.

 

getElementById()와 querySelector()의 차이점

querySelector()를 사용하면 id 선택자뿐만 아니라 querySelector("#id명" > ul) >처럼 둘 이상의 선택자를 사용해서 요소에 접근할 수 있습니다.