[TCP School/자바스크립트] 문서 객체 모델(DOM) - Document 객체
2023. 4. 24. 12:42
Document 객체는 웹 페이지 그 자체를 의미한다.
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.
Document 메소드
Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
HTML 요소의 선택
HTML 요소를 선택하기 위해 제공되는 메소드는 다음과 같다.
| 메소드 | 설명 |
| document.getElementsByTagName(태그이름) | 해당 태그 이름의 요소를 모두 선택함 |
| document.getElementById(아이디) | 해당 아이디의 요소를 선택함 |
| document.getElementsByClassName(클래스이름) | 해당 클래스에 속한 요소를 모두 선택함 |
| document.getElementsByName(name 속성값) | 해당 name 속성값을 가지는 요소를 모두 선택함 |
| document.querySelectorAll(선택자) | 해당 선택자로 선택되는 요소를 모두 선택함 |
HTML 요소의 생성
새로운 HTML 요소를 생성하기 이해 제공되는 메소드는 다음과 같다.
| 메소드 | 설명 |
| document.createElement(HTML 요소) | 지정된 HTML 요소를 생성함 |
| document.write(텍스트) | HTML 출력 스트림을 통해 텍스트를 출력함 |
HTML 이벤트 핸들러 추가
HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 메소드는 다음과 같다.
| 메소드 | 설명 |
| document.getElementById(아이디).onclick = function() {실행할 코드} | 마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가 |
HTML 객체 선택
| 객체 집합 | 설명 |
| document.anchors | name 속성을 가지는 <a>요소를 모두 반환 |
| document.body | <body> 요소를 반환 |
| document.cookie | HTML 문서의 쿠키를 반환 |
| document.domain | HTML 문서가 위치한 서버의 도메인 네임을 반환 |
| document.forms | <form> 요소를 모두 반환 |
| document.images | <img> 요소를 모두 반환 |
| document.links | href 속성을 가지는 <area> 요소와 <a> 요소를 모두 반환 |
| document.referrer | 링크되어 있는 문서의 URI를 반환 |
| document.title | <title> 요소를 반환 |
| document.URL | HTML 문서의 완전한 URL 주소를 반환 |
| document.baseURI | HTML 문서의 절대 URI를 반환 |
| document.docType | HTML 문서의 문서 타입을 반환 |
| document.documentElement | <html> 요소를 반환 |
| document.documentMode | 웹 브라우저가 사용하고 있는 모드를 반환 |
| document.documentURI | HTML 문서의 URL를 반환 |
| document.embeds | <embed> 요소를 모두 반환 |
| document.head | <head> 요소를 반환 |
| document.implementation | HTML DOM 구현을 반환 |
| document.inputEncoding | HTML 문서의 문자 인코딩 형식을 반환 |
| document.lastModified | HTML 문서의 마지막 갱신 날짜 및 시간을 반환 |
| document.readyState | HTML 문서의 로딩 상태를 반환 |
| document.scripts | <script> 요소를 모두 반환 |
| document.strictErrorChecking | 오류의 강제 검사 여부를 반환 |
TCP School의 강의 내용을 정리한 포스트입니다.
http://www.tcpschool.com/javascript/intro
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'공부 > JavaScript' 카테고리의 다른 글
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드 (0) | 2023.04.24 |
|---|---|
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - DOM 요소 (0) | 2023.04.24 |
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - DOM의 개념 (0) | 2023.04.24 |
| [TCP School/자바스크립트] 표준 객체 - Array 메소드 (0) | 2023.04.21 |
| [TCP School/자바스크립트] 표준 객체 - String 메소드 (0) | 2023.04.21 |
