[DOM] 문서 객체 모델

1. 표준 내장 객체(Standard Built-in Object)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

 

자바스크립트 엔진에서 제공되는 객체(브라우저, Node.js 공통)

* Object, Function, Array, String, Date, Set, Map, RegExp, Math

 

2. 브라우저 객체 모델(Browser Object Model, BOM)

https://www.w3schools.com/js/js_window.asp

https://developer.mozilla.org/en-US/docs/Web/API/Window

 

window 객체는 BOM의 최상위 객체로 브라우저 창을 의미한다.

BOM에 대한 공식적인 표준은 없다.

 

전역변수는 window 객체의 속성(Property) 이다.

전역함수는 window 객체의 메소드(Method) 이다.

* window 생략가능

 

브라우저를 제어하기위한 다양한 변수와 함수를 제공한다. (Node.js에는 없음)

- window.alert()

- window.confirm() 반환값 boolean

- window.open()

- window.prompt() 반환값 string

- window.setInterval() 타임머 설정

- window.innerHeight 브라우저 창의 content 영역의 높이

- window.innerWidth 브라우저 창의 content 영역의 너비

- window.onload 웹 문서 로딩 완료에 대한 이벤트 핸들러

 

- window.location.href 브라우저 현재 페이지 URL

- window.location.reload() 브라우저 새로고침

- window.screen.width 화면의 너비

- window.history.back() 이전 페이지 이동

- window.navigator.product 브라우저의 엔진 이름

- window.navigator.platform 운영체제 정보

- window.navigator.userAgent 운영체제와 브라우저 종합정보

 

3. 문서 객체 모델(Document Object Model, DOM)

https://www.w3schools.com/js/js_htmldom.asp

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

 

 

HTML 문서에 대한 구조적 정보(트리 구조)이며, 노드(node)라고 불리는 계층적 단위에 정보를 저장한다.

트리의 각 노드는 속성(Property)와 메소드를 가지는 객체로 구성되어 있어 프로그래밍 인터페이스를 제공한다.

브라우저는 웹 문서를 읽으면 문서의 DOM을 만든다.

... 요소(Element) 노드, 속성(Attribute) 노드, 텍스트(Text) 노드

 

4. DOM 주요 속성 및 메소드

상속관계:

EventTarget(조상) <- Node <- Document(자손)

EventTarget(조상) <- Node <- Element <- HTMLElement(자손)

 

1) Document

https://developer.mozilla.org/en-US/docs/Web/API/Document

 

document 객체는 DOM의 최상위 객체로 웹 문서 전체를 의미하며, document 객체는 window 객체의 속성이다.

(doucument 객체의 정확한 표기는 window.document)

 

웹 문서를 제어하기위한 다양한 속성과 메소드를 제공한다.

 

메소드

- Document.write()

- Document.getElementById()

- Document.getElementsByTagName()

- Document.getElementsByName()

- Document.getElementsByClassName()(IE9 이상에서 지원)

document.write('<p>hello</p>');					// 웹문서에 출력

var element = document.getElementById('id-name');
// 반환값은 해당 요소를 의미하는 Element 객체, 주어진 ID가 없으면 null

var elements = document.getElementsByTagName('div');		// return HTMLCollection
var elements = document.getElementsByName('name');		// return NodeList
var elements = document.getElementsByClassName('class-name');	// return HTMLCollection

 

* HTMLCollection vs NodeList

https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection

https://developer.mozilla.org/ko/docs/Web/API/NodeList

https://teamtreehouse.com/community/understanding-the-difference-between-an-htmlcollection-and-a-nodelist

https://devsoyoung.github.io/posts/js-htmlcollection-nodelist

 

2) Element

https://developer.mozilla.org/en-US/docs/Web/API/Element

 

Element 객체는 문서를 구성하는 요소를 의미

 

속성(Property)

- Element.innerHTML

- Element.className

- Element.classList(IE10 이상에서 지원)

 

메소드

- Element.getAttribute()

- Element.setAttribute()

- Element.getElementsByTagName()

- Element.getElementsByClassName()

element.className = "class-name1 class-name2";			// 클래스 속성값 수정
var className = element.className;				// 클래스 속성값 읽기

element.classList.add("class-name1", "class-name2");		// 클래스 속성값 추가
element.classList.remove("class-name2");			// 클래스 속성값 제거

element.setAttribute('attribute-name', attributeValue);		// 속성값 설정
var attributeValue = element.getAttribute('attribute-name');	// 속성값 출력

 

3) HTMLElement

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

 

속성(Property)

- HTMLElement.innerText

- HTMLElement.style

 

요소 객체의 속성(Property)은 태그의 속성(Atrribute)이다.

요소 객체의 style 속성(Property)으로 스타일을 제어할 수 있다.

<input type="text" name="input" />
<script>
    var input = document.getElementsByName('input')[0];
    console.log(input.type);    // "text"
    input.style.border = "1px solid red";
</script>

 

4) Node

https://developer.mozilla.org/en-US/docs/Web/API/Node

 

속성(Property)

- Node.textContent

- Node.childNodes

- Node.parentNode

- Node.childNodes

- Node.firstChild

- Node.lastChild

<div id='div'>
    <p><b>bold</b> in p1</p>
    <p><i>italic</i> in p2</p>
</div>
<script>
    var div = document.getElementById('div');

    var innerHTML = div.innerHTML;      // Element
    var innerText = div.innerText;      // HTMLElement
    var textContent = div.textContent;  // Node

    console.log(innerHTML);     // 요소 내부의 공백, 텍스트, 태그까지 같이 출력
    console.log(innerText);     // 요소 내부의 텍스트만 출력 (textContent와 다름)
    console.log(textContent);   // 요소 내부의 공백, 텍스트 출력 (태그만 제거)

    //div.innerHTML = "<p><strong>strong</strong> in p</p>";    // 태그 적용됨
    //div.innerText = "<p><strong>strong</strong> in p</p>";    // 태그 적용 안되고 출력됨
    div.textContent = "<p><strong>strong</strong> in p</p>";    // 태그 적용 안되고 출력됨
</script>

 

* textContent vs innerText

https://medium.com/better-programming/whats-best-innertext-vs-innerhtml-vs-textcontent-903ebc43a3fc

https://stackoverflow.com/questions/35213147/difference-between-textcontent-vs-innertext

 

5) ParentNode

https://developer.mozilla.org/en-US/docs/Web/API/ParentNode

 

속성(Property)

- ParentNode.children

<div id='div'>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
</div>
<script>
    var childNodes = document.getElementById('div').childNodes; // Node
    var children = document.getElementById('div').children;     // ParentNode

    console.log(childNodes.length); // 7 (text, h1, text, p, text, p, text)
    console.log(children.length);   // 3 (h1, p, p)
</script>