document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공
HTML 요소 선택
getElementByTagName(x) - 해당 태그 이름의 요소를 모두 선택
getElementById(x) - 해당 아이디의 요소를 선택
getElementByClassName(x) - 해당 클래스에 속한 요소를 모두 선택
document.getElementByName(x) - 해당 name 속성값을 가지는 요소를 모두 선택
querySelector(x) - 해당 선택자로 선택되는 첫번째 요소 선택
querySelectorAll(x) - 해당 선택자로 선택되는 요소를 모두 선택
HTML 요소 생성
createElement(x) - 지정된 HTML 요소를 생성
write(x) - HTML 출력 스트림을 통해 텍스트를 출력
HTML 이벤트 핸들러 추가
getElementById(x).onclick = function() { y } - id가 x인 요소에 onclick 핸들러 코드를 추가
HTML 객체 선택
이러한 HTML DOM에서 제공하는 객체 집합(object collection)을 이용하면 HTML 객체를 손쉽게 선택할 수 있습니다.
객체 집합설명DOM Level
| 객체 집합 | 설명 | DOM Level |
| document.anchors | name 속성을 가지는 <a>요소를 모두 반환함. | 1 |
| document.applets | applet 요소를 모두 반환함. (HTML5에서 제외됨) | 1 |
| document.body | <body>요소를 반환함. | 1 |
| document.cookie | HTML 문서의 쿠키(cookie)를 반환함. | 1 |
| document.domain |
HTML 문서가 위치한 서버의 도메인 네임(domain name)을 반환함 |
1 |
| document.forms | <form>요소를 모두 반환함. | 1 |
| document.images | <img>요소를 모두 반환함. | 1 |
| document.links | href 속성을 가지는 <area>요소와 <a>요소를 모두 반환함. | 1 |
| document.referrer | 링크(linking)되어 있는 문서의 URI를 반환함. | 1 |
| document.title | <title>요소를 반환함. | 1 |
| document.URL | HTML 문서의 완전한 URL 주소를 반환함. | 1 |
| document.baseURI | HTML 문서의 절대 URI(absolute base URI)를 반환함. | 3 |
| document.doctype | HTML 문서의 문서 타입(doctype)을 반환함. | 3 |
|
document.documentElement |
<html>요소를 반환함. | 3 |
|
document.documentMode |
웹 브라우저가 사용하고 있는 모드를 반환함. | 3 |
|
document.documentURI |
HTML 문서의 URI를 반환함. | 3 |
| document.domConfig | HTML DOM 설정을 반환함. (더는 사용하지 않음) | 3 |
| document.embeds | <embed>요소를 모두 반환함. | 3 |
| document.head | <head>요소를 반환함. | 3 |
|
document.implementation |
HTML DOM 구현(implementation)을 반환함. | 3 |
|
document.inputEncoding |
HTML 문서의 문자 인코딩(character set) 형식을 반환함. | 3 |
|
document.lastModified |
HTML 문서의 마지막 갱신 날짜 및 시간을 반환함 | 3 |
|
document.readyState |
HTML 문서의 로딩 상태(loading status)를 반환함. | 3 |
| document.scripts | <script>요소를 모두 반환함. | 3 |
|
document.strictErrorChecking |
오류의 강제 검사 여부를 반환함. | 3 |
'JavaScript' 카테고리의 다른 글
| [JavaScript] 실시간 시간 표시 (0) | 2020.12.22 |
|---|---|
| [JavaScript] 이벤트 (0) | 2020.12.18 |
| [JavaScript] window객체 (0) | 2020.12.18 |
| [JavaScript] 객체 (0) | 2020.12.18 |
| [JavaScript] 배열 (0) | 2020.12.18 |