JavaScript 활용팁
2015.06.03 / 21:53
HTML W3C DOM Node 와 IE Node 정리 (1) - 속성 노드까지
IamCoder
추천 수 290
커서의 오프셋에 관련하여 IE에서 다시 작성할 필요가 있다보니, Node도 다시 살펴볼겸 HTML관련으로 한정하여 가벼운 정리를 해봐야겠다. 기존의 HTML의 요소를 중심으로 생각했으면, 이러한 노드 단위 사고는 보다 저수준의 작은 단위로 쪼개 보는 것이며, 때로는 유용할 수 있으나 또는 번잡할 수도 있다. 그러나 해결치 못한 것의 실마리는 노드에서 찾아볼 수 있다.
HTML에서 하나의 요소는 내부의 여러 요소를 포함시킬 수 있다. 기존의 HTML 문서 작성이나 jQueyr나 Prototype 및 Dojo 등을 이용하였다면 쉽게 직접 Node를 이용할 필요없이 많은 것을 간단히 해결할 수 있으나, 이들은 요소 중심으로 작성되었기에 그보다 상세히 다루때 노드를 꺼내봐야 할 것이다.
[재료모음]
* MSDN : About the W3C Document Object Mode
* MDN : https://developer.mozilla.org/en/DOM/Node
* W3C DOM L1 Core, W3C DOM L2 Core, W3C DOM L3 Core
[연습 : HTML div 요소의 자식 node 갯수 세기]
"node-exam1"의 id를 가진 div요소는 몇 개의 자식 노드를 가질까? 연습겸 한번 세보자. IE는 자체 브라우저에서 제공하는 TextRange에서 character로 이동시키거나 여기서 오프셋을 찾아내려면, 일단 지원하는 것이 없기에 새로 만들어야 한다. 이때 node를 살펴보아 계산을 할 수 있다. 이를 위해 우선 node에 관해서 좀더 살펴보아야겠다. 위의 자식 노드를 세기 어렵다면 다음을 살펴보자.
위의 span은 3개의 자식 node를 갖는다.
- text 형식의 노드 : "hello"를 값으로 갖는다.
- Element 형식의 노드 : 요소 "<b> "태그이다. 또 내부에 텍스트 형식의 자식 노드를 갖고 있다.
- text 형식의 노드 : "!!!'를 값으로 갖는다.
만일 마지막의 "!!!"문자와 함께 빈공간이 없이 </span>요소로 마감이 된다면 span은 2개의 자식 노드가 갖게 된다. 보통 코드의 가독성을 위해 개행을 사용하는데 하나라도 탭 등 빈 칸이 들어가진다면 보이는 것과 달리 텍스트 노드로 이를 다룬다. (그러니까 첫 예제의 코드에서 5행과 6행사이, 6행과 7행사이에는 한개의 개행과 탭으로 이루어진 텍스트 형식의 노드가 있는 것이다.)
그렇다면 위의 첫 예제를 확인하면, 총 11개의 자식 노드를 갖는 것을 셀 수 있다. 주석도 한개의 노드로 인식한다. 노드를 사용하여 접근을 하면 보다 하위 수준으로 요소 및 그 내용을 다룰 수 있다는 점이 장점이며 주석의 내용까지 받아올 수 있다. (단, IE8이하는 주석을 노드로 받지 못한다. 갯수에서 제외된다.) 또한 삽입된 스크립트에서 document.write로 추가된 텍스트 노드는 </script>다음에 추가되는 것도 확인해 놓자. 그리고 script태그에서 CDATA 부분은 자식의 text노드에서 값으로 잡히지 않는다. 이때 그저 "/* */"만을 반환할 뿐이다.
[node의 분류]
노드 형식은 12종으로 분류할 수 있으나, HTML에서 다룰 것은 고작 몇개 안된다.
여기서 nodeType, nodeName, nodeValue는 프로퍼티로 노드에 따라 지정된 값을 반환한다. nodeType을 이용하여 노드의 종류를 확인할 수 있으며, nodeName을 이용하여 요소인 경우 태그명을 반환받을 수 있다. 기타 #으로 시작하는 것은 해당 문자열로 항시 반환하여 형식 검사로 쓸 수도 있으나 좋은 생각은 아니며 nodeType의 정수를 쓰는 것이 좋다. nodeValue도 해당 노드의 값을 반환한다. nodeType이 정수로 반환하는 것에 비해 문자열 상수를 이용하여 형식을 검사할 수도 있으나, 구형 IE 브라우저는 이를 지원하지 못한다.
- node.nodeType
- node.nodeName : 요소인 경우, 대문자 요소명으로 반환(크롬, FF, IE 등 마찬가지)
- node.nodeValue
HTML에서 아마 여기 주제는 1번타입의 Element 와 3번의 타입의 text에 한해서 신경을 쓸 것 같다.
[node의 생성]
- document.createElement('요소명')
- document.createAttribute('속성명')
- document.createTextNode('텍스트 노드 내용')
- document.createCDATASection('CDATA 내용')
- document.createComment('주석 내용')
[node의 관계 이동 및 접근]
노드의 종류를 알았으면 어떠한 것이 노드인지 알았을 것이다. 기존의 그저 하나의 요소로 생각했던 것은 노드로 생각해서 보먼, 대부분의 텍스트를 넣기 위해 사용하는 요소는 자신의 노드와 내부애 텍스트 형식 자식 노드를 자동적으로 갖게 되는 것을 알 수 있을 것이다. 또한 HTML 요소의 상당수는 다른 요소를 내부에 포함시킬 수 있으며, 이때텍스트 노드와 대등한 노드로 위치하게 되기도 한다. 텍스트 노드는 어떠한 자식도 갖을 수 없는 노드라는 특징이 있는 것도 같이 확인해 두자. 이제 노드 수준에서 노드간의 관계와 그에 따른 이동을 정리하겠다.
- node.parentNode
- node.parentElement
- node.ownerDocument : 현 문서의 document 객체가 된다.
- document.documentElement : 대개 html 문서에서는 html이 된다.
- node.childNodes : 배열 형식처럼 반환. length 프로퍼티를 사용할 수 있으며, index를 통해 개별 요소에 접근
- node.childNodes[index]
- node.childNodes.length
- node.firstChild
- node.lastChild
- node.previsousSibling
- node.nextSibling
sibling은 다른 동위의 이전 및 이후의 노드를 반환한다. 프레임워크에서 next나 previous메서드가 이 sibling을 이용한 것이다. 요소간의 이동은 다음과 같은 코드가 된다. [출처 : The Watchmaker Project ]
또한 nextSibling을 이용하여 insertAfter도 만들 수 있다. 이때 nextSibling 노드의 존재 여부에 따라 본래 마지막 노드인지 확인할 수 있고 없는 경우, apendChild를 이용하면 될 것이다. 요소간의 이동에 적용하려면 마찬가지로 while문으로 타입검사를 하면 될 것이다.
관련 메서드로는 다음과 같은 것이 있다.
- Node.hasChildNodes() : 자식 노드를 갖는지 Boolean 값으로 반환
- node1.contains(node2) : node2가 node1에 포함여부를 Boolean 값으로 반환
[node의 편집]
- node1.appendChild(node2) : node1에 자식 노드로 node2를 마지막으로 추가
- node1.removeChild(node2) : node1에 자식 노드인 node2를 제거
- node1.replaceChild(node2, node3) : node1의 자식노드인 node3을 node2로 교체
- node1.insertBefore(node2, node3) : node1의 자식노드인 node3 앞에 node2를 추가
appendChild가 제일 마지막에 추가되는 반면 제일 앞에 추가하고자 한다면 insertBefore를 이용하면 된다.
프로퍼티 설정으로 컨텐츠를 변경하거나 반환받을 수 있다.
- ElementNode.innerHTML : 태그를 포함된 내용을 반환 및 설정 가능
- ElementNode.textContent : 현 요소 내부의 텍스트 노드 반환 및 설정 (주의, script 및 style 요소도 text 노드를 가짐 IE9이상)
- Node.textContent : 해당 노드의 text 설정 및 반환 (IE9 이상)
- ElementNode.innerText : IE에서 지원되는 텍스트 설정 및 반환 (textContent 차이가 있음)
[attribute 노드 형식 ]
속성도 마찬가지로 노드로 다룰 수 있다. 다만 속성 노드로 직접 다룰 경우 구형 IE 브라우저 지원은 각자 차이가 있어 주의가 필요하다. HTML에서 각 요소에 설정된 속성은 attribute 노드를 이용할 수 있다.
속성 노드는 "node.attributes"를 통해 반환받을 수 있으나 이 자체가 속성 노드가 아니며, 개별 적인 속성 노드를 가진 배열 유사 형식의 객체이다. 다시 말해 "node.attributes"는 속성 노드는 아니나, "node.attributes[0]"은 속성 형식의 노드라는 것이다.
또한 개별 속성 노드에서 nodeValue로 값을 확인할 수 있다. 여기에 개별 속성 노드는 text형식의 자식 노드를 가지게 되는데, 여기에 해당 속성의 값을 갖고 있다. 이러한 점을 확인하면 다음과 같다.
이에 구형 IE 브라우저는 다음과 같은 문제/차이 가 있다.
- IE9까지는 인덱스가 작성 순서와 별개로 지정된다.
- IE8까지는 속성의 값을 가진 text 형식의 자식 노드가 포함되어 있지 않다.
- IE7까지는 node.attributes는 해당 요소의 전체 속성을 대상으로 index를 만든다. (DIV인 경우 82개)
개별 attr 노드 접근 및 편집
- node.attributes[index]
- node.attributes.item(index)
- node.attributes.getNamedItem("속성명')
- node.attributes.setNamedItem(node) : node로 설정함에 주의
- node.attributes.removeNamedItem("속성명'")
개별 속성의 값의 확인
- node.attributes['index'].nodeValue
개별 속성의 값의 설정
- node.attributes['index'].nodeValue = 설정 값
- node.hasAttributes() : 1개 이상 설정된 속성이 있는지 Boolean으로 반환, IE9이상 지원
- elementNode.getAttribute('속성명')
- elementNode.setAttribute('속성명'. '설정 값')
HTML 문서의 속성을 IE에서 노드 차원이나, setAttribute등의 메서드 사용으로 값의 설정이나 변경시 종종 버그가 있어 확인이 필요하다.
HTML에서 하나의 요소는 내부의 여러 요소를 포함시킬 수 있다. 기존의 HTML 문서 작성이나 jQueyr나 Prototype 및 Dojo 등을 이용하였다면 쉽게 직접 Node를 이용할 필요없이 많은 것을 간단히 해결할 수 있으나, 이들은 요소 중심으로 작성되었기에 그보다 상세히 다루때 노드를 꺼내봐야 할 것이다.
[재료모음]
* MSDN : About the W3C Document Object Mode
* MDN : https://developer.mozilla.org/en/DOM/Node
* W3C DOM L1 Core, W3C DOM L2 Core, W3C DOM L3 Core
[연습 : HTML div 요소의 자식 node 갯수 세기]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="node-exam1"> hello, <b>world</b> : demo <!-- 주석 --><h1>하이</h1> <script> /* <![CDATA[ */ document.write('hello<br/>'); document.write('bonjour'); /*]]>*/ </script> </div> |
| 1 | <span>hello,<b>world<b/>!!!</span> |
- text 형식의 노드 : "hello"를 값으로 갖는다.
- Element 형식의 노드 : 요소 "<b> "태그이다. 또 내부에 텍스트 형식의 자식 노드를 갖고 있다.
- text 형식의 노드 : "!!!'를 값으로 갖는다.
만일 마지막의 "!!!"문자와 함께 빈공간이 없이 </span>요소로 마감이 된다면 span은 2개의 자식 노드가 갖게 된다. 보통 코드의 가독성을 위해 개행을 사용하는데 하나라도 탭 등 빈 칸이 들어가진다면 보이는 것과 달리 텍스트 노드로 이를 다룬다. (그러니까 첫 예제의 코드에서 5행과 6행사이, 6행과 7행사이에는 한개의 개행과 탭으로 이루어진 텍스트 형식의 노드가 있는 것이다.)
그렇다면 위의 첫 예제를 확인하면, 총 11개의 자식 노드를 갖는 것을 셀 수 있다. 주석도 한개의 노드로 인식한다. 노드를 사용하여 접근을 하면 보다 하위 수준으로 요소 및 그 내용을 다룰 수 있다는 점이 장점이며 주석의 내용까지 받아올 수 있다. (단, IE8이하는 주석을 노드로 받지 못한다. 갯수에서 제외된다.) 또한 삽입된 스크립트에서 document.write로 추가된 텍스트 노드는 </script>다음에 추가되는 것도 확인해 놓자. 그리고 script태그에서 CDATA 부분은 자식의 text노드에서 값으로 잡히지 않는다. 이때 그저 "/* */"만을 반환할 뿐이다.
[node의 분류]
노드 형식은 12종으로 분류할 수 있으나, HTML에서 다룰 것은 고작 몇개 안된다.
| nodeType | 분류 | nodeName | nodeValue | 상수 |
|---|---|---|---|---|
| 1 | Element | 요소명 | null | ELEMENT_NODE |
| 2 | Attr | 속성명 | 속성값 | ATTRIBUTE_NODE |
| 3 | Text | #text | 컨텐트 노드 | TEXT_NODE |
| 4 | CDATASection | #cdata-section | 컨텐트 노드 | CDATA_SECTION_NODE |
| 5 | EntityReference | entity reference 이름 | null | ENTITY_REFERENCE_NODE |
| 6 | Entity | entity 이름 | null | ENTITY_NODE |
| 7 | ProcessingInstruction | target | 컨텐트 노드 | PROCESSING_INSTRUCTION_NODE |
| 8 | Comment | #comment | 주석 텍스트 | COMMENT_NODE |
| 9 | Document | #document | null | DOCUMENT_NODE |
| 10 | DocumentType | doctype 이름 | null | DOCUMENT_TYPE_NODE |
| 11 | DocumentFragment | #document fragment | null | DOCUMENT_FRAGMENT_NODE |
| 12 | Notation | notation 이름 | null | NOTATION_NODE |
여기서 nodeType, nodeName, nodeValue는 프로퍼티로 노드에 따라 지정된 값을 반환한다. nodeType을 이용하여 노드의 종류를 확인할 수 있으며, nodeName을 이용하여 요소인 경우 태그명을 반환받을 수 있다. 기타 #으로 시작하는 것은 해당 문자열로 항시 반환하여 형식 검사로 쓸 수도 있으나 좋은 생각은 아니며 nodeType의 정수를 쓰는 것이 좋다. nodeValue도 해당 노드의 값을 반환한다. nodeType이 정수로 반환하는 것에 비해 문자열 상수를 이용하여 형식을 검사할 수도 있으나, 구형 IE 브라우저는 이를 지원하지 못한다.
- node.nodeType
- node.nodeName : 요소인 경우, 대문자 요소명으로 반환(크롬, FF, IE 등 마찬가지)
- node.nodeValue
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="text_type_node"> Hello,<b>world</b>!!! </div> <script>var _node_type_elem = document.getElementById('text_type_node'); document.write(_node_type_elem.nodeType); // 1 document.write(_node_type_elem.nodeName); // div document.write(_node_type_elem.nodeValue); // null var _node_type_elem_firstChild = _node_type_elem.firstChild; document.write(_node_type_elem_firstChild.nodeType); // 3 document.write(_node_type_elem_firstChild.nodeName); // #text document.write(_node_type_elem_firstChild.nodeValue); // Hello, </script> |
[node의 생성]
- document.createElement('요소명')
- document.createAttribute('속성명')
- document.createTextNode('텍스트 노드 내용')
- document.createCDATASection('CDATA 내용')
- document.createComment('주석 내용')
[node의 관계 이동 및 접근]
노드의 종류를 알았으면 어떠한 것이 노드인지 알았을 것이다. 기존의 그저 하나의 요소로 생각했던 것은 노드로 생각해서 보먼, 대부분의 텍스트를 넣기 위해 사용하는 요소는 자신의 노드와 내부애 텍스트 형식 자식 노드를 자동적으로 갖게 되는 것을 알 수 있을 것이다. 또한 HTML 요소의 상당수는 다른 요소를 내부에 포함시킬 수 있으며, 이때텍스트 노드와 대등한 노드로 위치하게 되기도 한다. 텍스트 노드는 어떠한 자식도 갖을 수 없는 노드라는 특징이 있는 것도 같이 확인해 두자. 이제 노드 수준에서 노드간의 관계와 그에 따른 이동을 정리하겠다.
- node.parentNode
- node.parentElement
- node.ownerDocument : 현 문서의 document 객체가 된다.
- document.documentElement : 대개 html 문서에서는 html이 된다.
- node.childNodes : 배열 형식처럼 반환. length 프로퍼티를 사용할 수 있으며, index를 통해 개별 요소에 접근
- node.childNodes[index]
- node.childNodes.length
- node.firstChild
- node.lastChild
- node.previsousSibling
- node.nextSibling
sibling은 다른 동위의 이전 및 이후의 노드를 반환한다. 프레임워크에서 next나 previous메서드가 이 sibling을 이용한 것이다. 요소간의 이동은 다음과 같은 코드가 된다. [출처 : The Watchmaker Project ]
| 1 2 3 4 5 | function previous(p) { do p = p.previousSibling; while (p && p.nodeType != 1); return p; } |
관련 메서드로는 다음과 같은 것이 있다.
- Node.hasChildNodes() : 자식 노드를 갖는지 Boolean 값으로 반환
- node1.contains(node2) : node2가 node1에 포함여부를 Boolean 값으로 반환
[node의 편집]
- node1.appendChild(node2) : node1에 자식 노드로 node2를 마지막으로 추가
- node1.removeChild(node2) : node1에 자식 노드인 node2를 제거
- node1.replaceChild(node2, node3) : node1의 자식노드인 node3을 node2로 교체
- node1.insertBefore(node2, node3) : node1의 자식노드인 node3 앞에 node2를 추가
appendChild가 제일 마지막에 추가되는 반면 제일 앞에 추가하고자 한다면 insertBefore를 이용하면 된다.
| 1 | node1.insertBefore(node2, node1.childNode[0]); |
프로퍼티 설정으로 컨텐츠를 변경하거나 반환받을 수 있다.
- ElementNode.innerHTML : 태그를 포함된 내용을 반환 및 설정 가능
- ElementNode.textContent : 현 요소 내부의 텍스트 노드 반환 및 설정 (주의, script 및 style 요소도 text 노드를 가짐 IE9이상)
- Node.textContent : 해당 노드의 text 설정 및 반환 (IE9 이상)
- ElementNode.innerText : IE에서 지원되는 텍스트 설정 및 반환 (textContent 차이가 있음)
[attribute 노드 형식 ]
속성도 마찬가지로 노드로 다룰 수 있다. 다만 속성 노드로 직접 다룰 경우 구형 IE 브라우저 지원은 각자 차이가 있어 주의가 필요하다. HTML에서 각 요소에 설정된 속성은 attribute 노드를 이용할 수 있다.
| 1 | var attrNodeCollection = document.getElemenstByTagName('div')[0].attributes; |
속성 노드는 "node.attributes"를 통해 반환받을 수 있으나 이 자체가 속성 노드가 아니며, 개별 적인 속성 노드를 가진 배열 유사 형식의 객체이다. 다시 말해 "node.attributes"는 속성 노드는 아니나, "node.attributes[0]"은 속성 형식의 노드라는 것이다.
또한 개별 속성 노드에서 nodeValue로 값을 확인할 수 있다. 여기에 개별 속성 노드는 text형식의 자식 노드를 가지게 되는데, 여기에 해당 속성의 값을 갖고 있다. 이러한 점을 확인하면 다음과 같다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div id="_attrNode" class="textClass" style="border-bottom:1px solid #eee"> Hello, World </div> <script>var attrNodeCollection = document.getElementById("_attrNode").attributes; attrNodeCollection.length; // 3 attrNodeCollection.nodeType // undefined - 'attributes' 자체는 노드가 아니다. attrNodeCollection[0].nodeType // 2 - 속성 노드 형식의 값 attrNodeCollection[0].nodeName // id - 속성명 attrNodeCollection[0].nodeValue // _attrNode - 해당 속성의 값 attrNodeCollection[0].hasChildNodes() // true - 자식을 가지고 있다. attrNodeCollection[0].childNodes.length // 1 - 1개의 자식을 보유 attrNodeCollection[0].childNodes[0].nodeType // 3 - text 형식의 노드 attrNodeCollection[0].childNodes[0].nodeName // #text - 역시 text 형식의 노드임이 확인됨 attrNodeCollection[0].childNodes[0].nodeValue // _attrNode - 해당 text 노드의 값 attrNodeCollection[0].nodeValue === attrNodeCollection[0].childNodes[0].nodeValue // true </script> |
- IE9까지는 인덱스가 작성 순서와 별개로 지정된다.
- IE8까지는 속성의 값을 가진 text 형식의 자식 노드가 포함되어 있지 않다.
- IE7까지는 node.attributes는 해당 요소의 전체 속성을 대상으로 index를 만든다. (DIV인 경우 82개)
개별 attr 노드 접근 및 편집
- node.attributes[index]
- node.attributes.item(index)
- node.attributes.getNamedItem("속성명')
- node.attributes.setNamedItem(node) : node로 설정함에 주의
- node.attributes.removeNamedItem("속성명'")
개별 속성의 값의 확인
- node.attributes['index'].nodeValue
- elementNode.attributes.속성명.value
- elementNode.attributes['속성명'].value
- elementNode.attributes['index'].value
- elementNode.getAttribute('속성명')
- elementNode.getAttribute('속성명')
개별 속성의 값의 설정
- node.attributes['index'].nodeValue = 설정 값
- elementNode.attributes.속성명.value = 설정 값
- elementNode.attributes['속성명'].value = 설정 값
- elementNode.attributes['index'].value = 설정 값
- elementNode.setAttribute('속성명'. '설정 값')
- node.setAttributeNode(attribute node)
관련 메서드- elementNode.setAttribute('속성명'. '설정 값')
- node.setAttributeNode(attribute node)
- node.hasAttributes() : 1개 이상 설정된 속성이 있는지 Boolean으로 반환, IE9이상 지원
- elementNode.getAttribute('속성명')
- elementNode.setAttribute('속성명'. '설정 값')
HTML 문서의 속성을 IE에서 노드 차원이나, setAttribute등의 메서드 사용으로 값의 설정이나 변경시 종종 버그가 있어 확인이 필요하다.