DOM Method & Property 02

프로퍼티

이제 DOM에서 자주 사용되는 프로퍼티 중 일부를 소개합니다.


문서 내 모든 노드는 아래 프로퍼티를 가집니다.


◎ nodeName

nodeName 프로퍼티는 특정 노드의 이름을 포함한 문자열을 반환해 줍니다.

									name = node.nodeName
								

특정 노드가 요소 노드이면 nodeName 프로퍼티는 그 요소의 이름을 반환합니다. 이 경우 tagName 프로퍼티와 같은 값을 가집니다.

노드가 속성 노드이면 속성의 이름을 반환해 줍니다.

텍스트 노드이면 nodeName 프로퍼티는 "#text"라는 문자열을 반환합니다.

nodeName 프로퍼티는 읽기 전용이고 값을 바꾸거나 변경할 수는 없습니다.



◎ nodeType

nodeType 프로퍼티는 특정 노드의 형식을 지정하는 정수 값을 반환해 줍니다.

									integer = node.nodeType
								

nodeType 프로퍼티는 경우에 따라 아래 열 두 가지 값이 반환됩니다. 각 숫자는 nodeType에 해당하는 노드의 종류를 알려줍니다.

  • 1. ELEMENT_NODE
  • 2. ATTRIBUTE_NODE
  • 3. TEXT_NODE
  • 4. CDATA_SECTION_NODE
  • 5. ENTITY_REFERENCE_NODE
  • 6. ENTITY_NODE
  • 7. PROCESSING_INSTRUCTION_NODE
  • 8. COMMENT_NODE
  • 9. DOCUMENT_NODE
  • 10. DOCUMENT_TYPE_NODE
  • 11. DOCUMENT_FRAGMENT_NODE
  • 12. NOTATION_NODE

위 12가지 중에 처음 세 가지는 매우 중요합니다. 웹 문서 내에 요소들과 속성 그리고 텍스트 노드를 찾아내는 것이 가장 자주 사용하는 방법이기 때문입니다.

nodeType은 노드의 종류를 잘 못 알아서 제대로 동작이 수행되니 않는 것을 막기 위해 if 조건문과 함께 쓰입니다. 예를 들어 mynode라는 특정 노드를 인수로 가진 아래 함수를 살펴보면 그 노드가 문서 내 요소이면 title 속성을 설정하게 됩니다. 그러나 설정 전에 nodeType 프로퍼티를 통해 mynode가 실제로 요소 노드인지 알아보는 작업을 수행합니다. 즉 값이 1이면 요소 노드입니다.

									function addTitle(mynode) {
										if (mynode.nodeType == 1) {
											mynode.setAttribute("title", "이것은 중요한 내용입니다.");
										}
									}
								

nodeType 프로퍼티도 읽기 전용으로 설정할 수 있는 것이 아닙니다.



◎ nodeValue

nodeValue 프로퍼티는 특정 노드의 값을 반환해 줍니다.

									value = node.nodeValue
								

이 프로퍼티는 문자열을 반환합니다.

만약 노드의 종류가 속성 노드이면 nodeValue는 속성 값을, 텍스트 노드이면 그 안의 텍스트 내용을, 요소 노드이면 빈(null) 값을 반환합니다.

nodeValue 프로퍼티는 읽고 쓰기가 가능합니다. 하지만 빈 값이면 값을 설정할 수 없습니다. 다시 말해 nodeValue가 요소 노드에 해당될 때는 값을 지정할 수 없다는 의미입니다.

따라서 다음 예제와 같이 요소 노드에 값을 설정하는 것은 실행할 수 없습니다.

									var message = document.getElementById("fineprint");
									message.nodeValue = "이 명령문은 실행되지 않습니다.";
								

하지만 다음과 같은 방식으로 하면 됩니다. 요소 노드의 첫 자식 노드에 대한 값을 설정합니다. 첫 자식 노드는 텍스트 노드이므로 값이 설정됩니다.

									var message = document.getElementById("fineprint");
									message.firstChild.nodeValue = "이 명령문은 실행됩니다.";
								

다음 예제도 실행됩니다. 첫 번째 자식 노드가 텍스트 노드인지 확인한 후 실행하니까요.

									var message = document.getElementById("fineprint");
									if (message.firstChild.nodeType == 3) {
										message.firstChild.nodeValue = "이 명령문은 실행됩니다.";
									}
								

nodeValue 프로퍼티를 이용하는 것은 텍스트 노드 값을 설정하는 데 가장 간단한 방법입니다. 부모 요소의 속성 노드 값을 설정하기 위해서는 setAttribute를 사용하는 것이 일반적입니다.