[Javascript] DOM (Document Object Model) - get

■ DOM (Document Object Model)
HTML 페이지가 로드 되면 브라우저는 이 HTML 페이지를 다루기위한 DOM을 생성합니다.

■ DOM 은 'W3C 표준' 입니다.
- 이는 모든 언어에 오픈된 규약입니다.
즉, JavaScript 외에 다른 언어로도 DOM 표준을 따르는 HTML문서를 다룰수 있다.

- 'W3C DOM 표준'은  크게 3파트로 구성
1. Core DOM
2. XML DOM
3. HTML DOM

■ HTML DOM 표준의 목적은
HTML element를 다루기 위한 표준방법을 제시하는 겁니다.

■ JavaScript 는 DOM 구조의 HTML페이지를 다루기 위한 언어입니다.

- JS는 DOM 안의 모든 element를 변경할 수 있다.
- JS는 DOM 안의 모든 attribute를 변경할 수 있다.
- JS는 DOM 안의 모든 CSS를 변경할 수 있다.
- JS는 DOM 안의  element나 attribute를 삭제할 수 있다.
- JS는 DOM 안에  element나 attribute를 추가할 수 있다
- JS는 DOM 안의 event를 다룰 수 있다.
- JS는 DOM 안에 event를 추가할 수 있다.    

■ JavaScript는 window.document 객체를 통해 DOM 구조 다룹니다.

---

* getElementById(아이디)  :  해당 '아이디' 값을 가진 element 한개 리턴 (여러개 있으면 첫번째만 리턴)

---

* getElementsByTagName(태그) : '태그' 의 'element들' 을 배열로 리턴

---

* getElementsByClassName(클래스) : '클래스' 의 'element들' 을 배열로 리턴

---

* getElementsByName(name) : 'name' 의 'form element들' 을 배열로 리턴

---

* querySelectorAll(selector) : 'CSS selector' 의 'element들' 을 배열로 리턴

---

* HTML DOM 구조에서 object collection 사용 가능

document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts

 

* document.forms : document 의 모든 <form> element들

---

* document.images : document 의 모든 <img> element 들