Web -DOM과 querySelector

Web:

DOM 과 querySelector

| DOM이란?

https://developer.mozilla.org/ko/docs/Gecko_DOM_Reference/%EC%86%8C%EA%B0%9C 공식문서 참고

• 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다

• DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 

• DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

• 브라우저는 html 코드를 DOM이라는 객체형태의 모델로 저장한다. 이렇게 저장된 정보를 DOM Tree 라고한다. 따라서 html 엘리먼트는 트리 형태로 저장되는 것이다.

• 

| DOM API

브라우저는 DOM TREE를 찾고, 조작하는 것을 쉽게 도와주는 여러가지 메서드(DOM API)를 제공한다.

1. getElementById()

• ID 정보를 통해 찾는다.

2. querySelector()

• DOM을 찾는데 유용핟.

• css 스타일을 결정할때 사용하던 selector 문법을 홯용해서 dom에 접근이 가능핟.

css selector란?

.class, #id , > 과 같이 표현하는것

다양한 문법을 사용해 원하는 엘리먼트를 querySelector와 querySelectorAll메서드에서 사용할 수 있다.

3.  DOM 을 사용하는 공통적인 API 들의 간략한 목록

https://developer.mozilla.org/ko/docs/Gecko_DOM_Reference/%EC%86%8C%EA%B0%9C 참고

• document.getElementById(id)
• document.getElementsByTagName(name)
• document.createElement(name)
• parentNode.appendChild(node)
• element.innerHTML
• element.style.left
• element.setAttribute
• element.getAttribute
• element.addEventListener
• window.content
• window.onload
• window.dump
• window.scrollTo