Document 객체
Document 객체란?
- 웹 페이지 그 자체를 의미하며, 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.
1. HTML 요소 선택 (DOM 접근)
1) document.querySelector(selector)
- DOM으로 HTML Element의 정보를 조회하기 위해서는
querySelctor의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있다. - 이름이 같을 경우 최상단의 요소만 선택한다.
- 셀렉터로는 HTML Element('tag') id('#id'), class('.class') 세 가지가 가장 많이 사용된다
querySelector()메서드는document객체나 모든Element객체에서 사용 가능하다.
// id의 경우 맨 앞에 "#"을 붙여서 선택한다.
let idName = document.querySelector("#id명")
// class의 경우 맨 앞에 "."을 붙여서 선택한다.
let className = document.querySelector(".class명")
// name의 경우 html태그[name="name명"]을 사용해서 선택한다.
let nameName = document.querySelector("input[name='name명']")1-1. document.querySelectorAll(selector)
- 해당 선택자로 선택되는 요소를 모두 선택한다.
- HTML 요소가 아닌 nodeList 형태로 값을 반환하기 때문에 사용하려면 반복문을 이용해야 한다.
- 쉼표(
,)를 사용하여 서로 다른 이름의 요소를 한꺼번에 선택할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript DOM Element</title>
</head>
<body>
<h1>CSS 선택자를 이용한 선택</h1>
<p class="odd">첫 번째 단락이에요!</p>
<ul>
<li class="odd">첫 번째 아이템이에요!</li>
<li>두 번째 아이템이에요!</li>
<li class="odd">세 번째 아이템이에요!</li>
<li>네 번째 아이템이에요!</li>
<li class="odd">다섯 번째 아이템이에요!</li>
</ul>
</body>
</html>// 클래스가 "odd"인 요소 중에서 <li> 요소만을 선택함.
var selectedItem = document.querySelectorAll("li.odd");
for (var i = 0; i < selectedItem.length; i++) {
// 선택된 모든 요소의 텍스트 색상을 변경함.
selectedItem.item(i).style.color = "red";
}2) get 메서드
- document.getElementsByTagName(태그이름) : 해당 태그 이름의 요소를 모두 선택한다.
- document.getElementById(아이디) : 해당 아이디의 요소를 선택한다.
- document.getElementsByClassName(클래스이름) : 해당 클래스에 속한 요소를 모두 선택한다.
- document.getElementsByName(name속성값) : 해당 name 속성값을 가지는 요소를 모두 선택한다.
2. HTML 요소 생성
1) document.createElement(tag)
- 태그 이름('tag')을 사용해 새로운 요소 노드를 만든다.
let create = document.createElement('div')3. HTML 이벤트 핸들러 추가
document.querySelector('#b1').onclick = function() {
alert("버튼 클릭됨!!")
}4. HTML 객체 선택
| 객체 집합 | 설명 |
|---|---|
| document.anchors | name 속성을 가지는 <a> 요소를 모두 반환함 |
| document.body | <body> 요소를 반환함 |
| document.cookie | HTML 문서의 쿠키(cookie)를 반환함 |
| document.domain | HTML 문서가 위치한 서버의 도메인 네임(domain name)을 반환함 |
| document.forms | <form> 요소를 모두 반환함 |
| document.images | <img> 요소를 모두 반환함 |
| document.links | href 속성을 가지는 <area> 요소와 <a> 요소를 모두 반환함 |
| document.referrer | 링크(linking)되어 있는 문서의 URI를 반환함 |
| document.title | <title> 요소를 반환함 |
| document.URL | HTML 문서의 완전한 URL 주소를 반환함 |
| document.baseURI | HTML 문서의 절대 URI(absolute base URI)를 반환함 |
| document.documentElement | <html> 요소를 반환함 |
| document.documentMode | 웹 브라우저가 사용하고 있는 모드를 반환함 |
| document.documentURI | HTML 문서의 URI를 반환함 |
| document.embeds | <embed> 요소를 모두 반환함 |
| document.head | <head> 요소를 반환함 |
| document.implementation | HTML DOM 구현(implementation)을 반환함 |
| document.inputEncoding | HTML 문서의 문자 인코딩(character set) 형식을 반환함 |
| document.lastModified | HTML 문서의 마지막 갱신 날짜 및 시간을 반환함 |
| document.readyState | HTML 문서의 로딩 상태(loading status)를 반환함 |
| document.scripts | <script> 요소를 모두 반환함 |
| document.strictErrorChecking | 오류의 강제 검사 여부를 반환함 |
