소년코딩의 자바스크립트 강좌 40. DOM: Document 타입
2016. 10. 9. 13:57Document 타입
자바스크립트에서는 문서 노드를 Document 타입으로 표현한다.
브라우저에서 전체 HTML 페이지를 표현하는 문서 객체는 HTMLDocument의 인스턴스이며,
HTMLDocument는 Document를 상속한다.
document(문서) 객체는 window의 프로퍼티이므로 전역에서 접근할 수 있다.
특징
- nodeType은 9이다.
- nodeName은 '#document'이다.
- nodeValue는 null이다.
- parentNode는 null이다.
- OwnerDocument는 null이다.
Document 타입은 HTML 페이지를 표현하며,
가장 자주 쓰이는 용도는 document 객체를 통해 페이지에 대한 정보를 얻고 구조 및 외관을 조작하는 것 이다.
Document 타입의 주요 프로퍼티와 메서드
- doctype
- documentElement
- inplementation.*
- activeElement
- body
- head
- title
- lastModified
- referrer
- URL
- defaultview
- compatMode
- ownerDocument
- hasFocus()
- getElementById()
- getElementsByTagName()
- getElementsByName()
- wirte()
- writeln()
Document 자식 노드
Document 노드는 자식의로 하나의 DocumentType 노드와 Element 노드를 가질 수 있다.
console.log(document.childNodes[0].nodeType); // 10 (DOCUMENT_TYPE_NODE)
console.log(document.childeNodes[1].nodeType); // 1 (ELEMENT_NODE)또한 document는 해당 요소에 더 빨리, 직접접으로 접근할 수 있는 프로퍼티도 제공한다.
console.log(document.childNodes[0]); // <!DOCTYPE html>
console.log(document.doctype); // <!DOCTYPE html>
console.log(document.childNodes[1]); // html
console.log(document.documentElement); // html
var head = document.head; // <head>
var body = document.body; // <body>일반적인 문서 정보
document 객체는 로드된 HTML 문서/DOM에 대한 일반적인 정보에 접근할 수 있게 해준다.
console.log(document.title); // 문서 제목
document.title = 'New page'; // 문서 제목 설정
console.log(document.URL); // 완전한 URL
console.log(document.domain); // 도메인 이름
console.log(document.referrer); // 레퍼러
console.log(document.lastModified); // 최종 수정일
console.log(document.compatMode); // 호환 모드요소 위치
DOM에서 가장 자주 하는 일은 특정 요소나 요소 그룹에 대한 참조를 얻는 일이다.
document 객체에는 이런 기능을 하는 메서드는 getElementById()와 getElementsByTagName()이다.
getElementById(): 찾으려는 요소 ID를 매개변수로 받고 해당 요소를 찾아 반환하며, 존재하지 않을시 null을 반환한다.
// <div id='myDiv'>Some text</div>
// 이 요소는 다음 코드로 찾을 수 있다.
var div = document.getElementById('myDiv'); // <div id='myDiv'>에 대한 참조를 가져온다.
// 페이지에 ID가 같은 요소가 두 개 이상 존재한다면 그중 첫 번째 요소를 반환한다.
getElementsByTagName(): 요소의 태그 이름을 매개변수로 받고 해당하는 요소가 담긴 NodeList를 반환한다.
HTML 문서에는 HTMLCollenction 객체를 반환하는데, 이 객체는 '살아 있는 객체'라는 점에서 NodeList 컬렉션과 매우 비슷하다.
// HTMLCollection 객체는 images 변수에 저장된다.
var images = document.getElementsByTagName('img');
// NodeList 객체와 마찬가지로 HTMLCollection 객체의 데이터 역시 대곽호 표기법이나 item() 메서드로 접근할 수 있다.
console.log(images.length); // 이미지의 개수
console.log(images[0].src); // 첫 번째 이미지의 src 속성
console.log(images.item(0).src); // 첫 번째 이미지의 src 속성
// 문서 요소 전체를 가져오려면 '*'를 넘긴다.
var allElements = document.getElementsByTagName('*');
// 페이지의 요소 전체를 마크업 순서대로 포함하는 HTMLCollection을 반환한다.
특별한 컬렉션
document 객체에는 특별한 컬렉션이 몇 가지 있다.
각 컬렉션은 모두 HTMLCollection 객체이며 문서에 공통된 요소들에 바르게 접근하도록 만들어졌다.
console.dir(document.anchors); // name 속성이 있는 <a> 요소를 모두 가져온다.
console.dir(document.links); // href 속성이 있는 <a> 요소를 모두 가져온다.
console.dir(document.forms); // <form> 요소를 모두 가져온다.
// (= documents.getElementsByTagName('form');)
console.dir(document.images); // <img> 요소를 모두 가져온다.
// (= documents.getElementsByTagName('img');)문서에 쓰기
documents 객체의 기능 중에는 웹페이지의 출력을 집접 조작하는 기능이 있따.
write(): 넘겨받은 텍스트를 그대로 추가한다.
wrtielen(): 넘겨받은 텍스트를 그대로 추가하여 줄바꿈 문자(\n)를 문자열 마지막에 추가한다.
document.write('<strong>' + (new Date()).toString() + '</strong>');
문서 내에서 포커스, 활성 참조
document..hasFocus(): 사용자가 현재 HTML 문서가 로드된 창에 포커스를 두고 있는지 알 수 있다.
document.atciveElement: 문서 내에서 포커스를 가지고 있거나 활성 상태인 element에 대한 참조를 얻을 수 있다.
// 문서가 로드된 창/팁에 계속 포커스를 두면 true가 반환된다.
setTimeout(function() {
console.log(document.hasFocus()); // true or false
}, 5000);
// 문서 내에서 포커스를 가지고 있거나 활성 상태인 element에 대한 참조
console.log(document.activeElement); // ex <textarea>
by 소년코딩
추천은 글쓴이에게 큰 도움이 됩니다.
악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.
'자바스크립트 이야기 > 기본 강좌' 카테고리의 다른 글
| 소년코딩의 자바스크립트 강좌 42. DOM: Text 타입 (0) | 2016.10.10 |
|---|---|
| 소년코딩의 자바스크립트 강좌 41. DOM: Element 타입 (0) | 2016.10.09 |
| 소년코딩의 자바스크립트 강좌 39. DOM: Node 인터페이스 (0) | 2016.10.09 |
| 소년코딩의 자바스크립트 강좌 38. DOM이란? (0) | 2016.10.02 |
| 소년코딩의 자바스크립트 강좌 37. 즉시 실행 함수를 이용한 블록 스코프 (0) | 2016.09.27 |
