HTML을 지탱하는 건 태그(tag)
문서 객체 모델(DOM)에 따르면, 모든 HTML 태그(tag)는 객체이다. 태그 내의 문자(text) 역시 객체이다.
이런 모든 객체는 자바스크립트를 통해 접근할 수 있고, 페이지를 조작할 때 이 객체를 사용함.
document.body는 <body> 태그를 객체로 나타낸 것.
트리에 있는 노드는 모두 객체.
태그(tag) = 요소(element) = 노드(node) = 객체
1. Node
document 보따리안에는 수많은 element, text, 주석 등으로 구성된 객체들의 구조가 이루어져 있다. 객체들이 존재하려면 '객체의 형식'이 존재해야한다.
문서에서 읽혀지면 객체화된다. 이러한 개체들을 공통분모로 추상화 시킨 것이 노드! Node
2. DOM 예제
<html>은 루트 노드, <head>와 <body>는 루트 노드의 자식
text 노드는 문자열만 담고, 자식 노드를 가질 수 없다.<head>와 <body> 사이 new line과 white space도 텍스트 노드로 인식됨
<title>태그는 사슴에 관하여라는 텍스트 노드를 자식으로 가짐
문서 내에 공백이 있다면 다른 문자와 마찬가지로 텍스트 노드가 됩니다
DOM 노드는 노드 간 이동, 수정 등을 가능하게 해주는 프로퍼티와 메서드를 지원해주는데, 그건 DOM 에 정리해놓음!
3. DOM 프로퍼티
내장 DOM 프로퍼티의 경우 document.body 이런것만으로 충분하지 않은 경우 자신만의 프로퍼티를 만들 수도 있다.
DOM 노드는 자바스크립트 객체이다. 객체를 바꿔본다면,
document.body에 myData라는 이름의 새로운 프로퍼티를 만들어보자면,
document.body.myData = {
name : "Ceasar"
title : "Imperator"
};
alert(document.body.myData.title);
//Imperator메서드도 추가해보자면,
document.body.sayTagName = function(){
alert(this.tagName);
};
document.body.sayTagName();//
Body
(sayTagName의 'this'엔 document.body가 저장됨)
