💻 문서 객체 모델(DOM)
문서 객체 모델(DOM, Document Object Model): XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 이러한 DOM은 W3C의 표준 객체 모델이며,
DOM의 개체 구조는 Node Tree 표현된다.
아래 HTML에서, 동일하게 DOM에서는 아래와 같은 노드 트리로 표현된다.
DOM이 아닌 것
1. HTML
<html>
Hello, World
</html>html 상에는 <head>와 <body> 태그가 빠져있지만 DOM 트리에는 모두 표현된다.
자바스크립트(appendChild, creatElement, createTextNode 등)로 DOM에 새로운 노드를 추가할 때, HTML 문서는 변경되지 않는다.
2. 개발자 도구 상의 내용
css는 ::before, ::after 등을 통해 가상요소를 추가할 수 있고, 이는 개발자 도구에 나타난다. 하지만 DOM 상에는 반영되지 않는다.
💻 Node
문서 트리를 구성하는 단위
Node Name 노드의 이름, 태그에 따라 다른 값
Node Value 노드의 값
| 값 | 노드 분류 | 설명 | Node Name | Node Value |
|---|---|---|---|---|
| 1 | 엘리먼트 노드 Element | 태그 하나 | 태그 이름 | Null |
| 2 | 속성 노드 Attribute | 태그 속성 | 태그 속성 | 속성 값 |
| 3 | 텍스트 노드 Text | 태그 안 내용 | #text | 내용 |
| 8 | 주석 노드 Comment | 주석 | #comment | 내용 |
| 9 | 문서 노드 Document | 문서 전체 | #document | 내용 |
//h1 태그가 있을 때의 예시
h1.nodeType // 1 (앨리먼트 노드)
h1.nodeValue // null
h1.nodeName // H1-
문서 노드
트리의 최상위에 존재하며, DOM tree 에 접근하기 위한 시작점이다. -
엘리먼트 노드
HTML 엘리먼트로써 속성과 텍스트 노드에 접근 시 먼저 접근해야 한다. 예시 ->div, p, html, ehad, body, h1.. -
속성 노드
HTML 요소의 속성을 표현한다. 속성 노드는 해당 속성이 지정된 요소의 일부로 표현된다. -
텍스트 노드
HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. (최종 하단 노드)
1. 노드 선택
보통 자바스크립트에서 HTML 태그를 가져오는 것을 선택한다고 표현한다.
선택자는 HTML 태그를 선택할 수 있게 도와주는 문자열이다.
getElementById, querySelector, getElementsByClassName, getElementsByTagName, querySelectorAll
document.getElementById("id명")
document.querySelector('#아이디')
document.querySelector('선택자') //여러개가 존재 -> 첫번째만 선택
document.querySelector('선택자 내부선택자 내부선택자...');
document.getElementsByClassName("class명")[순서]
document.getElementsByTagName("태그명")[순서]
document.querySelectorAll('.클래스')
document.querySelectorAll('선택자') //다중선택 (배열)'
document.querySelectorAll("선택자명")[순서]태그를 선택시 변수명 맨 앞에 $를 붙인다 / 여러개의 태그 선택시 $$ (그냥 변수와 태그의 구별을 위해 정해놓은 규칙)
2. 노드 생성
| 코드 | 설명 |
|---|---|
createElement(tagName) | 요소를 생성 |
createTextNode(text) | 텍스트 노드 생성 |
let div = document.createElement('div');
let text = document.createTextNode('Hello World');
div.appendChild(text);
document.body.append(div);3. 노드 추가
| 코드 | 설명 |
|---|---|
| before(), after() | 선택된 노드의 앞, 뒤에 삽입 |
| prepend(), append() | 선택된 노드의 첫 번째 자식 앞, 마지막 자식 뒤에 삽입 / node 객체와 text를 모두 입력 받음 / 리턴 값 없음 (undefined) / 여러 개의 노드와 문자열 추가 가능 |
| appendChild() | 선택한 노드의 마지막 자식 뒤에 삽입 / node 객체만 입력 받음 / 추가한 자식 노드 리턴 / 하나씩만 추가 가능 |
| insertAdjacentHTML(position, htmlText); | htmlText를 노드로 변환 후 position에 삽입 |
| insertAdjacentElement(position, element) | element를 position에 삽입 |
| insertAdjacentText(position, text) | text를 position에 삽입 |
| insertBefore(newNode, referenceNode) | newNode를 referenceNode 앞에 삽입 / referenceNode가 null → 선택한 노드의 마지막 자식 뒤에 삽입 (== appendChild) |
insertAdjacent 값의 position
beforebegin선택된 노드의 앞afterend선택된 노드의 뒤afterbegin선택된 노드의 첫 번째 자식 앞beforeend선택된 노드의 마지막 자식 뒤
<!-- before() / beforebegin -->
<div>
<!-- prepend() / afterbegin -->
<span></span>
<p></p>
<!-- append() / beforeend -->
</div>
<!-- after() / afterend-->예시
<!-- html -->
<ul id='list'>
<li>1</li>
<li id='third'>3</li>
</ul>//javaScript
const list = document.getElementById('list');
const newNode = document.createElement('li');
newNode.innerHTML = '2';
const referenceNode = document.getElementId('third');
list.insertBefore(newNode, referenceNode);이 경우 아래와 같은 구조로 추가가 된다.
- 1
- 2
- 3
4. 노드 변경
| 코드 | 설명 |
|---|---|
| element.replaceWith(param1,....,paramN) | 요소를 인수로 변경 |
| replaceChild(newChild, oldChild); | 두 번재 인수를 첫 번재 인수로 변경한다선택된 노드의 앞, 뒤에 삽입 |
const oldNode = document.getElementById('second');
const parent = oldNode.parentNode;
const newNode = document.createElement('li');
newNode.id ='new';
newNode.innerHTML = '4';
oldNode.replaceWith(newNode);
parent.replaceChild(newNode, oldNode);둘 다 결과값은 아래와 같이 나타난다.
- 1
- 4
- 3
5. 노드 삭제
| 코드 | 설명 |
|---|---|
| remove() | 선택된 노드를 삭제 |
| removeChild() | 선택된 노드의 자식 노드를 삭제 |
const child = document.getElementById('second');
const list = document.getElementById('list');
child.remove();
list.removeChild(child); //둘은 같은 기능을 한다6. 노드 복사
node.cloneNode(deep);
deep
truenode의 children까지 복사false해당 노드만 복사default브라우저에 따라 상이, 작성 추천
const apple = document.getElementById('apple');
const appleCopy = apple.cloneNode(true);
appleCopy.id = 'apple2';
document.body.append(appleCopy);복사한 노드의 id 값을 변경해주는 이유는, 동일한 id를 가진 노드가 문서 안에 여러 개 존재하는 상황을 방지하기 위해서이다.
💻 WINDOW
JavaScript에서 document와 window는 관련이 있지만 다른 객체이다.
window 객체는 DOM 문서가 포함된 브라우저 창이나 탭을 나타낸다. 예를 들어 인터넷 창을 열면 그 창 전체는 window이다.
window는 브라우저의 JavaScript 환경에서 최상위 전역 객체로서, 브라우저의 주소를 바꾸거나 새로운 창을 열거나 시간을 설정하는 기능 등 창과 관련된 여러가지 기능이 포함된다.
window는 DOM 이상의 기능을 제공한다.
⌨ DOCUMENT
document는 window 객체의 속성으로 실제 웹페이지의 내용, 즉 현재 브라우저 창에 로드된 DOM 문서를 나타낸다. 웹페이지의 모든 글자와 사진, 버튼들이 document에 속해있다.
document를 사용해 HTML 요소에 접근하고 조작하며, 내용을 수정하고 이벤트 리스너를 추가하고 HTML 문서에 특정한 작업을 수행할 수 있다.
대부분의 경우, DOM의 요소에 접근하고 조작하기 위해, 즉 웹페이지를 조작하고 내용을 변경하기 위해 document 를 사용한다.
하지만 가끔 브라우저창과 관련된 작업을 위해 window 를 사용하기도 한다.
