DOM

---

Document Object Model

 

• 웹 페이지를 구성하는 javascript "객체"들의 집합
• DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
• DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다.

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN

---

document 객체

• The document object is our entry point into the world of the DOM.
• It contains representations of all the content on a page, plus tons of useful methods and properties.

console.dir(document)

---

Selecting

• 텍스트, HTML, CSS가 아닌 DOM의 객체를 선택한다.

-  getElement(s)By...()

document.getElementById()

 

document.getElementsByTagName()

 

document.getElementsByClassName()

- returns an HTMLCollection (not an array)

---

-  querySelector & querySelectorAll

document.querySelector('hi');
document.querySelector('#id');
document.querySelector('.class');
document.querySelector('img:nth-of-type(2)');
document.querySelector('a[title="Java"]');

• A newer, all-in-one method to select a single element.
• 일치하는 요소가 여러 개일 경우, 첫 번째로 일치하는 값을 반환한다.

document.querySelectorAll('p');

• 일치하는 모든 요소를 반환한다.

---