JavaScript

[DOM] JS - Document - 문서객체

document 객체 정의

 

HTML 웹문서 안에 있는 모든 다른 객체의  소유자 역할하는 객체.

 


 

1.

document 객체는 웹페이지를 대표.

2.
웹페이지의 어떤 요소에 접근 위해서는 먼저 document 객체 호출 필요.

3.

아래는 HTML 문서에 접근 및 제어 위한 document 객체 사용법 소개.

 

 

 

HTML 요소찾기 (= 요소선택)

 

document.getElementById (id)
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
HTML 요소의 속성값 변경 (예제)

 

element.style.property = new style

HTML 요소의 스타일 변경 (예제)

 


[메서드]

 

element.setAttribute (attribute, value)
HTML 요소의 속성값 변경.

 

 

 

HTML 요소추가 요소삭제

 

document.createElement (element)

HTML 요소생성

 

document.removeChild (element)

HTML 요소제거

 

document.appendChild (element)

HTML 요소추가

 

document.replaceChild (new, old)
HTML 요소대체 (= 요소변경)

 

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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
1/89
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 4
웹유틸
회원센터
홈짱 PC버전 로그인