문서 객체 모델 (Document Object Model)
브라우저의 동작원리
브라우저의 핵심 기능은
사용자가 참조하고자 하는 웹페이지를 서버에 요청하고 서버의 응답을 받아 브라우저에 표시하는 것
· Client Side = 웹 브라우저
· Server Side = node.js, NGiNX 등의 웹서버
- 브라우저는 서버로부터 HTML, CSS, JavaScirpt, 이미지 파일 등을 응답받음
- HTML, CSS 파일은 랜더링 엔진의 HTML passer와 CSS passer에 의해 passing되어 DOM, CSS DOM Tree로 변환되고 Render Tree와 결합
- 이후 생성된 Render Tree를 기반으로 브라우저는 웹페이지를 표시
Document Object Model (DOM)
객체 지향 모델로서 구조화된 문서를 표현하는 양식 ( XML, HTML 문서의 프로그래밍 인터페이스 )
모든 요소와 요소의 Attribute, Text 를 각각의 "Object"로 만들고 이들 객체를 부자 관계를 표현할 수 있는 "Tree Structure"로 구성한 "Document Based Model"
DOM은 JavaScript 를 통해 동적으로 변경할 수 있으며 변경된 DOM은 랜더링에 반영 ( HTML 문서를 읽고 마음대로 조작할 수 있음 )
· DOM은 메모리상에 존재
· 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 방법은 DOM을 변경하는 것
· DOM에 접근하고 변경하는 property와 method의 집합은 DOM API임
· DOM은 구조화된 표현(Structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함
DOM의 기능
- HTML 문서에 대한 모델 구성
👉 HTML 문서 로드 후 메모리에 해당 문서에 대한 모델 생성
- HTML 문서 내 각 요소에 대한 접근 · 수정
👉 DOM 은 각 Object 에 접근하고 수정할 수 있는 property와 method 를 제공.
👉 DOM 이 수정되면 브라우저를 통해 사용자가 보게 될 내용이 변경
DOM Tree의 구성(요소)
DOM 에서 모든 Element, Attribute, Text 는 하나의 Object 이며 Document 객체의 자식
<!DOCTYPE html>
<html>
<head>
<style>
.red { color: #ff0000; }
.blue { color: #0000ff; }
</head>
<body>
<div>
<h1> Cities </h1>
<ul>
<li id="one" class="red> Seoul </li>
<li id="two" class="blue> London </li>
<ul>
</div>
</body>
</html> ⚪ 문서 노드 (Document Node)
<!DOCTYPE html>
Tree 의 최상단
DOM Tree 에 접근하기 위한 시작점
Element, Attribute, Text Node 등에 접근하려면 Document Node 를 통해야함
⚪ 요소 노드 (Element Node)
<head></head>, <div></div>, <li>
HTML.Element 객체를 상속 후 요소별 특성을 표현한 객체 모델
문서의 구조를 서술
Attribute, Text Node 등에 접근하기 위해 Attribute Node를 찾아서 접근
⚪ 어트리뷰트 노드 (Attribute Node)
id="one", class="red"
HTML Element 의 Attribute(속성)을 표현한 Node
Attribute Node 는 해당 Attribute 가 지정된 요소의 자식이 아니라 해당 요소의 "일부"로 표현
⚪ 텍스트 노드 (Text Node)
Cities, Seoul, London
DOM Tree의 최종단
HTML Element 의 Text 를 표현한 Node
Text Node 는 Element Node 의 자식,
DOM Query (DOM 요청)
Query : 질문, 문의하다
👉 DataBase 에 특정한 데이터를 보여달라는 클라이언트(사용자)의 요청
< 쿼리문을 작성한다 = DataBase에서 원하는 정보를 가져오는 코드를 작성한다 >
출력에서 Elements Collection(요소들의 모음)인 경우, 배열처럼 인덱싱이 되는 기능을 가짐
Elements Collection은 Object - collection 으로 나타나며,
Element 경우 Object - Element 로 나타남
하나의 Element 접근
document.getElementById("id");
document.querySelector('.category.Margin .ribbon')⚪ document.getElementById('id')
Id Attribute 값으로 Element Node 1개 선택
복수로 선택된 경우, 첫번째 Element만 반환
Return 👉 HTMLElement를 상속받은 Object
⚪ document.querySelector('cssSelector')
CSS Selector 로 element Node 중 1개 선택
첫번째 Element 만 반환
Return 👉 HTMLElement를 상속받은 Object
여러 개의 Elements 접근
document.getElementsByTagName("li");
document.getElementByClassName("odd");
document.getElementsByName("first");
document.querySelectorAll('#id, .class');⚪ document.getElementsByClassName()
Class Attribute 값으로 Element Nodes 모두 선택
공백으로 구분하여 여러 개의 class 지정 가능
Return 👉 HTMLCollection (live)
⚪ document.getElementsByTagName()
Tag Name 통해 Element Nodes 모두 선택
Return 👉 HTMLCollection (live)
⚪ document.querySelectorAll()
CSS Selector 로 Element Node 모두 선택
"," 를 통해 Elements 동시에 선택 가능
반환 Object가 NodeList 이므로, for문 또는 forEach문을 사용
Return 👉 NodeList (non-live)
live와 non-live 의 차이
객체의 속성값 변경이 동적으로 반영
반복문의 조건 등에 직접적으로 영향을 줌
실시간 = Live
DOM Manipulation (DOM 조작)
Text Node 접근 / 수정
// Text Node 의 부모 요소 Node 를 선택
const one = document.getElementById('one')
> console.dir(one) // HTMLLIElement: li#one.red
> console.log(one.nodeName) // LI
> console.log(one.nodeType) // 1: Element node
// firstChild property 로 Text Node 탐색
const textNode = one.firstChild;
> console.log(textNode.nodeName) // #text
> console.log(textNode.nodeType) // 3: Text node
> console.log(textNode.nodeValue) // Seoul
// nodeValue property 로 Text 수정
textNode.nodeValue = 'Busan';⚪ Text에 접근하는 순서
1. 해당 Text Node의 부모 요소 노드를 선택
2. node.firstChild property 를 사용하여 Text Node 탐색
3. 텍스트 노드의 유일한 property nodeValue 이용 텍스트 취득 / 수정
nodeValue노드의 값 반환
return 👉 Text Node > 문자열 // Element Node > null
Attribute Node 접근 / 수정
const input = document.querySelector('input[type=text]')
// input에 'say' Attribute 가 존재하는지 확인,
// 없으면 'say' 를 Attribute 로 추가하고 값으로 'hello!' 설정
if (!input.hasAttribute('say')) {
input.setAttribute('say', 'hello!');
}
// input 의 'say' Attribute 의 value 를 취득
console.log(input.getAttribute('say') // hello!
// input 의 'say' Attribute 를 제거,
// 그 후 input 에 'say' Attribute 가 존재하는지 확인
input.removeAttribute('say')
console.log(input.hasAttribute('say')) // false⚪ node.hasAttribute(attribute)
지정한 Attribute 를 갖고있는지 검사함
return 👉 Boolean
⚪ node.getAttribute(attribute)
Attribute Value 취득
return 👉 string(문자열)
⚪ node.setAttribute(attribute)
Attribute 와 Attribute Value 를 설정
return 👉 undefined
⚪ node.removeAttribute(attribute)
Attribute 삭제
return 👉 undefined
DOM 조작을 통한 Node·Element 생성 / 삭제
const newElement = document.createElement('li') // Element 생성
const newText = document.createTextNode('Beijing') // Text Node 생성
newElement.appedchild(newText) // newText(TextNode) 를 NewElement 자식으로 DOM Tree 추가
const container = document.querySelector('ul')
container.appendChild(newElement) // NewElement 를 container 자식으로 DOM Tree 추가⚪ createElement(tagName)
tagName 을 Argument(인자) 로 전달하여 Element 생성
return 👉 HTMLElement 를 상속받은 Object
⚪ createTextNode(text)
text 를 Argument 로 전달하여 Text Node 생성
return 👉 Text Object
⚪ appendChild(Node)
Argument 로 전달한 Node 를 마지막 자식 Element 로 Dom Tree 추가
return 👉 undefined
⚪ removeChild(attribute)
Argument 로 전달한 Node 를 DOM Tree 에서 제거
return 👉 undefined
