.png)
📖 Node Object
1. Node 객체 정의
- HTML 문서(Document)는 노드 트리(Node tree)라고 불리는 계층적 구조에 저장된다.
- 노드 트리는 노드들의 집합이며, 노드 관계를 보여준다.
- Node 객체는 DOM 시조와 같은 역할은 하고, 모든 DOM 객체는 Node 객체를 상속 받는다.
2. Node 속성
✍ Exmple
<div class="site">
<h1>DOM API</h1>
<ul>
<li><a href="#">Naver</a></li>
<li><a href="#">Goolgle</a></li>
<li><a href="#">Safari</a></li>
</ul>
</div>2-1. childNodes
👉 주어진 요소의 자식 노드 컬렉션을 NodeList 반환, 텍스트 요소를 포함한 모든 자식 요소를 노드로 인식한다.
✍ Exmple
var siteBox = document.querySelector('.site');
console.log(siteBox.childNodes); // NodeList(3) [text, ul, text]2-2. children
👉 직계 자식 노드에서 Element Node를 반환한다.
✍ Exmple
var ul = document.querySelector('ul');
console.log(ul.children); // HTMLCollection(3) [li, li, li]2-3. firstChild, lastChild
👉 childNodes 목록에서 첫 번째 자식 노드 또는 마지막 자식 노드를 가리킨다.
✍ Exmple
var ul = document.querySelector('ul');
console.log(ul.firstElementChild); // <li><a href="#">Naver</a></li>
console.log(ul.lastElementChild); // <li><a href="#">Safari</a></li>2-4. nextSibling, previousSibling
👉 다음 형제 노드, 이전 형제 노드
✍ Exmple
var ul = document.querySelector('ul');
console.log(ul.previousElementSibling); // <h1>DOM API</h1>
console.log(ul.nextElementSibling); // null2-5. parentNode
👉 부모의 노드를 탐색한다.
✍ Exmple
var ul = document.querySelector('ul');
console.log(ul.parentNode); // <div class="site">...</div>2-6. nodeType
👉 모든 노드의 타입은 12가지 숫자형 상수중 하나이다.
ELEMENT_NODE = 1
ATTRIBUTE_NODE = 2
TEXT_NODE = 3
CDATA_SECTION_NODE = 4
ENTITY_REFERENCE_NODE = 5
ENTITY_NODE = 6
PROCESSING_INSTRUCTION_NODE = 7
COMMENT_NODE = 8 DOCUMENT_NODE = 9
DOCUMENT_TYPE_NODE = 10
DOCUMENT_FRAGMENT_NODE = 11
NOTATION_NODE = 12
DOCUMENT_POSITION_DISCONNECTED = 1
DOCUMENT_POSITION_PRECEDING = 2
DOCUMENT_POSITION_FOLLOWING = 4
DOCUMENT_POSITION_CONTAINS = 8
DOCUMENT_POSITION_CONTAINED_BY = 16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 32
2-7. nodeName, nodeValue
👉 nodeName과 nodeValue는 해당 노드의 정보를 제공
✍ Exmple
var h = document.querySelector('h1');
console.log(h.nodeName.toLowerCase()); // h1
console.log(h.localName); // h1 (크롬 또는 사파리 제공하는지 불투명)
console.log(h.textContent); // DOM API
console.log(h.firstChild.nodeValue); // DOM API3. Node 메서드
✍ Exmple
<div class="site">
<h1>DOM API</h1>
<ul>
<!--
<li><a href="https://www.naver.com/">Naver</a></li>
<li><a href="https://www.google.co.kr/">Goolgle</a></li>
<li><a href="https://www.daum.net/">Daum</a></li>
-->
</ul>
</div>3-1. hasChildNodes()
👉 현재 노드에서 자식 노드가 있는지 Boolean 값으로 반환한다.
✍ Exmple
var site_list = document.querySelector('ul');
console.log(site_list.hasChildNodes()); // true3-2. appendChild()
👉 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 추가한다.
✍ Exmple
// site data(array)
var site_datas = [
{
site: {
name: 'Naver',
link: 'https://www.naver.com/'
}
},
{
site: {
name: 'Google',
link: 'https://www.google.co.kr/'
}
},
{
site: {
name: 'Daum',
link: 'https://www.daum.net/'
}
}
];
// ul
var site_list = document.querySelector('ul');
// forEach
site_datas.forEach(function (item, index, array) {
var name = item.site.name;
var link = item.site.link;
// ul > li
var site_item = document.createElement('li');
// ul > li > a
var site_link = document.createElement('a');
site_link.setAttribute('href', link);
// li > a > text
var site_content = document.createTextNode(name);
site_link.appendChild(site_content);
site_item.appendChild(site_link);
site_list.appendChild(site_item);
console.log(site_list); // <ul><li>...</li></ul>
}); 3-3. removeChild()
👉 DOM 에서 하위 노드를 제거하고 제거된 노드를 반환한다.
3-4. replaceChild()
👉 특정 부모 노드의 한 자식 노드를 다른 노드로 교체 한다.
✍ Syntax
replacedNode = parentNode.replaceChild(newChild, oldChild);📌 특징(주의 할 점!)
🧐 newChild는 oldChild를 교체할 새로운 노드이다. 만약 이미 DOM 안에 존재한다면 가장 먼저 제거된다.
🧐 oldChild는 이미 존재하는, 교체될 자식 노드 이다
🧐 replacedNode는 교체된 노드이다. oldChild와 동일한 노드이다.
3-5. cloneNode()
👉 메서드를 호출한 노드의 복제된 노드를 반환한다.
✍ Syntax
var dupNode = node.cloneNode(deep);📄 node
복제 되어야 할 node
📄 dupNode
복제된 새로운 node
📄 deep(Optional)
해당 node의 children 까지 복제 하려면 true, 해당 node만 복제하려면 false
📌 특징(주의 할 점!)
🧐 모든 속성 또는 값(인라인 이벤트 포함)을 복제한다. 하지만 외부스크립트 연결된 이벤트는 복제 되지 않는다.
🧐 id 사용할 경우 문서 내의 id 값이 중복되니 주의가 요구된다.
3-6. insertBefore()
👉 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입한다.
- 주어진 노드가 문서에 이미 존재하면
insertBefore()현재 위치에서 새 위치로 이동한다. 즉, 지정된 새 상위에 추가하기 전에 기존 상위에서 자동으로 제거된다. - 노드가 문서의 두 위치에 동시에 있을 수 없다.
✍ Syntax
var insertedNode = parentNode.insertBefore(newNode, referenceNode);📄 insertedNode
삽입되는 node
📄 parentNode
새로 삽입된 노드의 부모
📄 newNode/referenceNode
삽입할 node
📄 referenceNode
삽입 되기 전의 node, 이 경우 null 이라면 다음 newNode 끝에 parentNode의 자식 노드를 삽입.
📌 특징(주의 할 점!)
🧐 두번째 인자 referenceNode를 전달하지 않으면 appendChild()처럼 동작 한다.
🧐 두번째 인자 referenceNode는 선택적 옵션이 아니므로 명시적으로 전달할 필요가 있다.
3-7. contains()
👉 주어진 인자가 노드의 지손인지 아닌지 Boolean 값으로 반환한다.
3-8. isEqualNode(IE 9+)
👉 두 노드가 동일한지 확인한다.
3-9. compareDocumentPosition(IE 9+)
👉 주어진 노드의 위치를 문서의 다른 노드와 비교한다.
4. TextNode
5. DocumentFragment 노드
DocumentFragment 노드는 라이브 DOM 트리 외부에 경량화된 문서 DOM을 생성한다.
즉,라이브 DOM 트리처럼 작동하되 메모리상에서만 존재하는 빈 문서 템플릿이다.
DocumentFragment 자식노드를 메모리 상에서 손쉽게 조작한 후, 라이브 DOM에 추가하는것도
가능하다. DocumentFragment를 사용하여 메모리 상 노드 구조를 만든 후 이를 라이브노드구조에삽입하면 성능 향상을 꾀 할 수 있다.
👉 DocumentFragment는 <html>,<body> 등을 제외한 모든 노드를 생성할 수 있다.
👉 DocumentFragment는 DOM을 추가하더라도 DocumentFragment 자체는 추가되지 않고 내부의 노드만 추가된다.
👉 DocumentFragment에 직접적으로 innerHTML과 같은 메서드를 사용할 수 없으나, 요소 노드를 생성한 후에는 가능하다.
👉 DocumentFragmen를 DOM에 추가한 후에는 생성한 메모리 상에서 소멸된다. 소멸된 데이터를 메모리 하려면 cloneNode(true)를 사용한다.
✍ Exmple
// DocumentFragment (문서 파편 조각)
var doc_frag = document.createDocumentFragment();
// DOM Parser를 활용해서 문서 객체 생성
// W3C 사양 (https://www.w3.org/TR/DOM‑Parsing)
// 크로스 브라우징을 목적으로 하는 대체 수단(https://gist.github.com/eligrey/1129031)
// Node.js 서버 사이드 환경에서 사용 가능한 라이브러리(https://github.com/component/domify)
var created_dom_objecs = newDOMParser('HTMLCode', 'MIMEType');
6. Nodelist & HTMLCollection
NodeList는 새로운 API(
.querySelector())를 사용하여 수집한 집합을 말하며,
HTMLCollection은 과거의 API를 사용하여 수집한 집합을 말한다. 이들은 배열 객체(Array Object)와 유사하여 유사 배열 객체(Array Like Object)라고 부른다.
👉 집합은 정적(Static)일 수 있다. 이는 집합에 포함된 노드들이 현재 문서에 대한 스냅샷(Snapshot) 이라는 것 이다.
👉 기본적으로 노드는 문서에 구조화된 트리(Tree) 순서에 따라 정렬된다. 요컨데 순서대로 수집된다.
👉 length 속성을 사용하여 집합 내 노드의 개수를 알 수 있다.
