document 객체 정의
HTML 웹문서 안에 있는 모든 다른 객체의 소유자 역할하는 객체.
1.
document 객체는 웹페이지를 대표.
아래는 HTML 문서에 접근 및 제어 위한 document 객체 사용법 소개.
HTML 요소찾기 (= 요소선택)
document.getElementById (id)
document.getElementsByTagName (name)
태그명으로 요소 찾기
document.getElementsByClassName (name)
cf.
document.querySelector(CSS selectors )
지정 선택자와 일치하는 첫 번째 요소
document.querySelectorAll(CSS selectors )
지정 선택자와 일치하는 모든 요소
HTML 요소변경
[속성]
element.innerHTML = new html content
HTML 요소의 내용 변경 (예제)
element.attribute = new value
element.style. property = new style
HTML 요소의 스타일 변경 (예제)
[메서드]
element.setAttribute (attribute, value )
HTML 요소추가 및 요소삭제
document.createElement (element )
HTML 요소생성
document.removeChild (element )
HTML 요소제거
document.appendChild (element )
HTML 요소추가
document.replaceChild (new , old )
document.write (text )
HTML 요소출력
이벤트 핸들러 추가
document.getElementById (id) .onclick = function () {code }
onclick 이벤트 발생 시 실행할 코드 추가
HTML 객체찾기
HTML DOM Level 1 (1998) : 11개의 HTML 객체, 객체모음, 속성으로 시작.
HTML DOM Level 3 : 현재 훨씬 많은 HTML 객체, 객체모음, 속성이 추가 됨.
※ 속성 설명 끝 숫자는 도입된 DOM level 번호
document.anchors
name 속성 갖은 모든 <a> 요소 반환. 1
document.applets
모든 <applet> 요소 반환 (HTML5에서 폐기예고) . 1
document.baseURI
문서의 절대 기본 URI 반환. 3
document.body
<body> 요소 반환. 1
document.cookie
문서의 쿠키 반환. 1
document.doctype
문서의 doctype 반환. 3
document.documentElement
<html> 요소 반환. 3
document.documentMode
브라우저에서 사용하는 모드 반환. 3
document.documentURI
문서의 URI를 반환. 3
document.domain
문서 서버의 도메인명 반환. 1
document.domConfig
사용중지 . DOM 구성 3을 반환.
document.embeds
모든 <embed> 요소 반환. 3
document.forms
모든 <form> 요소 반환. 1
document.head
<head> 요소 반환. 3
document.images
모든 <img> 요소 반환. 1
document.implementation
DOM 구현 반환. 3
document.inputEncoding
문서의 인코딩 (문자셋) 반환. 3
document.lastModified
문서가 업데이트 된 날짜와 시간 반환. (= 최종수정시간 반환) 3
document.links
href 속성 갖는 모든 <area> 및 <a> 요소 반환. 1
document.readyState
문서로드상태 (= 문서준비상태) 반환. 3
document.referrer
리퍼러 (링크된 문서) URI 반환. 1
document.scripts
모든 <script> 요소 반환. 3
document.strictErrorChecking
오류 검사가 적용되는 경우 반환. 3
document.title
<title> 요소 반환. 1
document.URL
문서의 전체 URL 반환. 1
최신댓글