[Javascript] document 객체와 DOM 객체의 API(프로퍼티, 컬렉션, 메소드)

출처 : 명품 웹 프로그래밍

 

• 브라우저는 HTML 태그로부터 DOM 객체를 생성하고 DOM 트리를 구성한 후, DOM 객체를 화면에 출력한다
• DOM의 목적은 HTML 태그가 출력된 모양과 콘텐츠를 제어하기 위해서이다
• DOM 트리의 루트는 document 객체이다
• 하지만 document 객체는 DOM 객체가 아니다
• DOM 객체의 구성 요소는 프로퍼티/ 메소드/ 컬렉션/ 이벤트 리스너/ CSS3 스타일이다

 

---

 

document 객체의 주요 프로퍼티, 컬렉션, 메소드

[프로퍼티]

- location

- domain

- referrer

- cookie

- lastModified

- readyState

- title : 문서의 제목 문자열. <title/> 태그가 없으면 빈 문자열

- body

- head

- defaultView

- activeElement

- documentElement

- URL

 

[컬렉션]

- images

- links : 문서 내의 href 속성을 가진 모든 링크 객체(</a>나 <area/>)들의 컬렉션

- forms

 

[메소드]

- getElementsByTagName()

- getElementsByClassName()

- getElementsByName() : 주어진 name 속성 값을 가진 모든 태그(DOM 객체)의 컬렉션

- getElementById() : 주어진 id 속성 값을 가진 첫 번째 DOM 객체 리턴 (s 없음)

- addEventListener() : addEventListener("이벤트", 함수)

: 함수명을 인자로 넘길 때 "함수()" 형태로 넘기면, 함수가 바로 실행되는 것을 주의해야 한다

- removeEventListener()

- open() : document에 담긴 컨텐츠 모두 지우고, 새로운 HTML 컨텐츠를 ㅆ르 수 있도록 열기

- close() : document에 담긴 HTML 컨텐츠를 출력하고, 더 이상 쓰기를 받지 않음

- createElement() : HTML 태그의 동적 생성

- write()

 

---

 

DOM 객체의 주요 공통 프로퍼티, 컬렉션, 메소드

[프로퍼티]

- id

- lang

- syle

- title

- tagName : 태그 이름 문자열. 항상 대문자로 표시됨. ex) SPAN, DIV

- innerHTML

 

- childElementCount

- firstElementChild

- lastElementChild

- nextElementSibling

- parentElement

- previousElementSibling

 

- offsetHight : border-box 높이

- offsetWidth : border-box 폭

- offsetLeft

- offsetTop

 

[컬렉션]

- children : 자식 DOM 객체들의 컬렉션 (자식들을 가리키는 레퍼런스 배열)

 

[메소드]

- addEventListener()

- removeEventListener()

- click()

- focus() : 이 객체에 포커스 지정

- setAttribute() : 속성 추가

- appendChild() : 마지막 자식 뒤에 새로운 자식 추가

- insertBefore() : 지정된 자식 앞에 새 자식 추가

- querySelector() : 지정된 CSS3 셀렉터와 일치하는 첫 번째 자식 리턴

- removeChild()

- replaceChild()

 

---

Window 객체

https://developer.mozilla.org/ko/docs/web/api/window

Window - Web API | MDN