출처 :
http://www.ibm.com/developerworks/kr/series/web/index.html
아래 내용은 위 출처의 기사의 일부를 복사 후 편집/수정한 것입니다.
단순히 개인적으로 알고자하는 내용만을 남긴 것이니, 자세한 정보는 위의 출처를 참조하세요.
개념상의 노드
DOM 트리에서 여러분이 만나게 되는 거의 모든 것이 노드이다. 가장 기본적인 레벨에 있고, DOM 트리에 있는 노드이다. 모든 애트리뷰트는 하나의 노드이다. 모든 텍스트 조각도 하나의 노드이다. 심지어 코멘트, (카피라이트 상징을 나타내는 © 같은) 특별 문자도 모두 노드이다.
노드란..
간단히 말해서, 노드는 DOM 트리에 있는 그저 단순한 하나의 존재이다. 엘리먼트와 텍스트가 완전히 다른 유형유형이라면 여러분은 완전히 다른 코드를 작성하여 한 유형에서 다른 유형으로 옮겨가야 한다. 공통 노드 유형을 사용한다면 상황은 달라진다. 이 경우 노드에서 노드로 간단히 움직일 수 있고 엘리먼트나 텍스트의 특정의 것을 수행하고 싶을 때에만 노드의 유형을 생각하면 된다. DOM 트리 주위로 이동할 때 같은 연산을 사용하여 엘리먼트의 부모 또는 자식으로 이동한다. 엘리먼트의 애트리뷰트 같은 특정 노드 유형에서 구체적인 작업이 필요하다면 엘리먼트나 텍스트 같은 하나의 노드 유형에 대해서만 작업하면 된다.
노드의 속성
* nodeName은 노드의 이름을 나타낸다. (아래 참조)
* nodeValue:는 노드의 "값"을 제공한다. (아래 참조)
* parentNode는 노드의 부모를 리턴한다. 모든 엘리먼트, 애트리뷰트, 텍스트는 부모 노드를 갖고 있다는 것을 기억하라.
* childNodes는 노드의 자식들의 리스트이다. HTML로 작업할 때 엘리먼트를 다룰 경우 이 리스트는 유용하다. 텍스트 노드와 애트리뷰트 노드는 어떤 자식도 갖지 않는다.
* firstChild는 childNodes 리스트에 있는 첫 번째 노드로 가는 지름길이다.
* lastChild도 또 다른 지름길이다. childNodes 리스트에 있는 마지막 노드로 가는 지름길이다.
* previousSibling은 현재 노드 앞에 있는 노드를 리턴한다. 다시 말해서, 현재 것 보다 앞에 있는 노드를 리턴한다. 현재 노드의 부모의 childNodes 리스트에 있는 것 보다 선행하는 노드를 리턴한다. (헷갈린다면 마지막 문장을 다시 한번 더 읽어라.)
* nextSibling은 previousSibling 속성과 비슷하다. 부모의 childNodes 리스트에 있는 다음 노드로 돌린다.
* attributes는 엘리먼트 노드에서 유일하게 유용한 것이다. 엘리먼트의 애트리뷰트 리스트를 리턴한다.
몇몇 다른 속성들은 보다 근본적인 XML 문서로 적용되고 HTML 기반의 웹 페이지로 작업할 때 많이 사용되지 않는다.
nodeName과 nodeValue는 실제로 모든 노드 유형에 적용되는 것은 아니다. (한 노드 상의 다른 속성들의 경우도 마찬가지다.) 이 속성들은 null 값을 리턴할 수 있다. (JavaScript에서는 "undefined"로 나타난다.) 예를 들어, 텍스트 노드용 nodeName 속성은 무효이다. (또는 어떤 브라우저에서는 "undefined"이다. 텍스트 노드는 이름이 없기 때문이다. nodeValue는 노드의 텍스트를 리턴한다.)
비슷하게, 엘리먼트는 nodeName --엘리먼트의 이름--을 갖고 있지만 엘리먼트의 nodeValue 속성의 값은 언제나 무효이다. 애트리뷰트는 nodeName과 nodeValue, 이 두 가지 속성에 대한 값을 갖는다.
DOM에서 노드 속성 사용하기
// These first two lines get the DOM tree for the current Web page,
// and then the <html> element for that DOM tree
var myDocument = document;
var htmlElement = myDocument.documentElement;
// What's the name of the <html> element? "html"
alert("The root element of the page is " + htmlElement.nodeName);
// Look for the <head> element
var headElement = htmlElement.getElementsByTagName("head")[0];
if (headElement != null) {
alert("We found the head element, named " + headElement.nodeName);
// Print out the title of the page
var titleElement = headElement.getElementsByTagName("title")[0];
if (titleElement != null) {
// The text will be the first child node of the <title> element
var titleText = titleElement.firstChild;
// We can get the text of the text node with nodeValue
alert("The page title is '" + titleText.nodeValue + "'");
}
// After <head> is <body>
var bodyElement = headElement.nextSibling;
while (bodyElement.nodeName.toLowerCase() != "body") {
bodyElement = bodyElement.nextSibling;
}
// We found the <body> element...
// We'll do more when we know some methods on the nodes.
} |
노드의 방식
모든 노드에 사용할 수 있는 메소드
* insertBefore(newChild, referenceNode)는 newChild 노드를 referenceNode 앞에 삽입한다. newChild의 미래의 부모에 대해 이것을 호출할 것이다.
* replaceChild(newChild, oldChild)는 oldChild 노드를 newChild 노드로 교체한다.
* removeChild(oldChild)는 함수가 실행되고 있는 노드에서 oldChild 노드를 제거한다.
* appendChild(newChild)는 newChild 노드를 이 함수가 실행되고 있는 노드에 추가한다. newChild는 목표 노드의 자식들의 끝에 추가된다.
* hasChildNodes()는 호출된 노드가 자식을 갖고 있을 경우 true를 , 그렇지 않을 경우 false를 리턴한다.
* hasAttributes()는 호출된 노드가 애트리뷰트를 갖고 있을 경우 true를, 애트리뷰트가 없을 경우 false를 리턴한다.
대부분의 경우, 이 모든 메소드들이 노드의 자식들을 다루고 있다. 이것이 바로 그들의 주요 목적이다. 텍스트 노드나 엘리먼트의 이름 값을 파악하기 위해 메소드를 많이 호출할 필요가 없다. 단순히 노드의 속성을 사용하면 된다.
DOM에서 노드 메소드 사용하기
// These first two lines get the DOM tree for the current Web page,
// and then the <html> element for that DOM tree
var myDocument = document;
var htmlElement = myDocument.documentElement;
// What's the name of the <html> element? "html"
alert("The root element of the page is " + htmlElement.nodeName);
// Look for the <head> element
var headElement = htmlElement.getElementsByTagName("head")[0];
if (headElement != null) {
alert("We found the head element, named " + headElement.nodeName);
// Print out the title of the page
var titleElement = headElement.getElementsByTagName("title")[0];
if (titleElement != null) {
// The text will be the first child node of the <title> element
var titleText = titleElement.firstChild;
// We can get the text of the text node with nodeValue
alert("The page title is '" + titleText.nodeValue + "'");
}
// After <head> is <body>
var bodyElement = headElement.nextSibling;
while (bodyElement.nodeName.toLowerCase() != "body") {
bodyElement = bodyElement.nextSibling;
}
// We found the <body> element...
// Remove all the top-level <img> elements in the body
if (bodyElement.hasChildNodes()) {
for (i=0; i<bodyElement.childNodes.length; i++) {
var currentNode = bodyElement.childNodes[i];
if (currentNode.nodeName.toLowerCase() == "img") {
bodyElement.removeChild(currentNode);
}
}
}
} |
DOM을 사용하는 HTML 파일과 JavaScript 코드
<html>
<head>
<title>JavaScript and the DOM</title>
<script language="JavaScript">
function test() {
// These first two lines get the DOM tree for the current Web page,
// and then the <html> element for that DOM tree
var myDocument = document;
var htmlElement = myDocument.documentElement;
// What's the name of the <html> element? "html"
alert("The root element of the page is " + htmlElement.nodeName);
// Look for the <head> element
var headElement = htmlElement.getElementsByTagName("head")[0];
if (headElement != null) {
alert("We found the head element, named " + headElement.nodeName);
// Print out the title of the page
var titleElement = headElement.getElementsByTagName("title")[0];
if (titleElement != null) {
// The text will be the first child node of the <title> element
var titleText = titleElement.firstChild;
// We can get the text of the text node with nodeValue
alert("The page title is '" + titleText.nodeValue + "'");
}
// After <head> is <body>
var bodyElement = headElement.nextSibling;
while (bodyElement.nodeName.toLowerCase() != "body") {
bodyElement = bodyElement.nextSibling;
}
// We found the <body> element...
// Remove all the top-level <img> elements in the body
if (bodyElement.hasChildNodes()) {
for (i=0; i<bodyElement.childNodes.length; i++) {
var currentNode = bodyElement.childNodes[i];
if (currentNode.nodeName.toLowerCase() == "img") {
bodyElement.removeChild(currentNode);
}
}
}
}
}
</script>
</head>
<body>
<p>JavaScript and DOM are a perfect match.
You can read more in <i>Head Rush Ajax</i>.</p>
<img src="http://www.headfirstlabs.com/Images/hraj_cover-150.jpg" />
<input type="button" value="Test me!" onClick="test();" />
</body>
</html> |
API 디자인 설명
DOM은 객체 지향 API가 아니다. 우선, 많은 경우 여러분은 노드 객체에 메소드를 호출하기 보다는 객체의 속성들을 직접적으로 사용할 것이다. 예를 들어, getNodeName() 메소드가 없다. 다만 nodeName 속성을 직접 사용한다. 따라서 노드 객체들은(그리고 다른 DOM 객체들은) 함수가 아닌 속성들을 통해 많은 데이터를 노출한다.
문제는 JavaScript가 메소드 오버로딩(method overloading)이라는 기술을 지원하지 않는다는 점이다. 다시 말해서, JavaScript에서는 주어진 이름에 대해 하나의 메소드나 함수를 가져야 한다는 의미이다. 따라서 스트링을 취하는 getNamedItem() 메소드를 갖고 있다면 getNamedItem()이라는 이름의 다른 메소드나 함수를 가질 수 없다. 두 번째 버전이 다른 유형의 인자를 취하더라도 말이다. (또는 완전히 다른 인자를 취해도 마찬가지다.) 그럴 경우 JavaScript는 에러를 보고하고 코드는 작동하지 않는다.
본질적으로 DOM은 메소드 오버로딩과 다른 OO 프로그래밍 기술들을 피한다. OO 프로그래밍 기술을 지원하지 않는 언어를 포함하여 API는 여러 언어들을 통해서 작동한다는 확신 때문이다. 결국 몇 가지 추가적인 메소드 이름을 배워야 한다는 것이다. 예를 들어 자바 같은 언어에서 DOM을 배울 수 있고 같은 메소드 이름과 코딩 구조가 자바스크립트 같은 DOM 구현을 가진 다른 언어들에도 작동할 것이라는 것을 알 수 있다.
프로그래머를 조심시켜라!
nodeName 속성은 모든 유형이 이름을 가질 수 있도록 하고 있다. 하지만 많은 경우 그 이름은 정의되지 않았거나 프로그래머에게는 어떤 가치도 없는 낯선 이름이다. (예를 들어, 자바에서 텍스트 노드의 nodeName은 많은 경우 "#text"로 리포팅 된다. 근본적으로 에러 핸들링은 여러분에게 남겨지게 된다. 단순히 myNode.nodeName에 액세스 하여 그 값을 사용하는 것은 안전한 방법이 아니다. 많은 경우 그 값은 무효가 될 것이다. 따라서 프로그래밍에 이것이 적용될 때 프로그래머들이 주의해야 한다.
일반 노드 유형들
대부분의 웹 애플리케이션에서 네 가지 유형의 노드로 작업한다.
* 문서 노드는 전체 HTML 문서를 나타낸다.
* 앨리먼트 노드는 a 또는 img 같은 HTML 엘리먼트를 나타낸다.
* 애트리뷰트 노드는 href (a 엘리먼트에 대해) 또는 src (img 엘리먼트에 대해) 같은 HTML 엘리먼트에 대한 애트리뷰트를 나타낸다.
* 텍스트 노드는 "Click on the link below for a complete set list" 같은 HTML 문서에 있는 텍스트를 나타낸다. 이는 p, a, h2 같은 엘리먼트 내부에 나타나는 텍스트이다.
문서 노드
문서 노드는 실제로 HTML(또는 XML) 페이지에 있는 엘리먼트가 아니라 페이지 그 자체이다. 따라서 HTML 웹 페이지에서 문서 노드는 전체 DOM 트리이다. 자바스크립트에서 document 키워드를 사용하여 문서 노드에 액세스 할 수 있다.
자바스크립트의 document 키워드는 현재 웹 페이지에 대한 DOM 트리를 리턴한다. 여기에서부터 여러분은 트리에 있는 모든 노드들과 작업할 수 있다.
또한 document 객체를 사용하여 다음과 같은 메소드를 사용하는 새로운 노드를 만들 수 있다.
* createElement(elementName)는 제공된 이름을 가진 엘리먼트를 만든다.
* createTextNode(text)는 제공된 텍스트를 가진 새로운 텍스트 노드를 만든다.
* createAttribute(attributeName)는 제공된 이름을 가진 새로운 애트리뷰트를 만든다.
여기에서 주목해야 할 것은 이러한 메소드들이 노드를 만들지만 이들을 첨부하거나 이들을 특정 문서에 삽입하지 않는다는 점이다. 따라서 이미 봤던 insertBefore() 또는 appendChild() 같은 메소드들 중 하나를 사용해야 한다. 따라서 다음과 같은 코드를 사용하여 새로운 엘리먼트를 만들어 문서에 붙여야 한다.
var pElement = myDocument.createElement("p");
var text = myDocument.createTextNode("Here's some text in a p element.");
pElement.appendChild(text);
bodyElement.appendChild(pElement); |
document 엘리먼트를 사용하여 웹 페이지의 DOM 트리에 액세스 하면 엘리먼트, 애트리뷰트, 텍스트와 직접 작업할 준비가 된 것이다.
엘리먼트 노드
1. 애트리뷰트와 작동하는 것과 관련된 메소드: :
* getAttribute(name)는 name이라는 애트리뷰트의 값을 리턴한다.
* removeAttribute(name)는 name이라는 애트리뷰트를 제거한다.
* setAttribute(name, value)는 name이라는 애트리뷰트를 만들고 이것의 값을 value로 설정한다.
* getAttributeNode(name)는 name라고 하는 애트리뷰트 노드를 리턴한다. (애트리뷰트 노드는 아래에서 설명한다.)
* removeAttributeNode(node)는 제공된 노드와 매치되는 애트리뷰트 노드를 제거한다.
2. 중첩된 엘리먼트를 찾는 메소드: :
* getElementsByTagName(elementName)는 제공된 이름을 가진 엘리먼트 노드의 리스트를 리턴한다.
새로운 img 엘리먼트를 만들고 애트리뷰트를 설정한 다음 이것을 HTML 페이지의 바디에 추가한다.
var imgElement = document.createElement("img");
imgElement.setAttribute("src", "http://www.headfirstlabs.com/Images/hraj_cover-150.jpg");
imgElement.setAttribute("width", "130");
imgElement.setAttribute("height", "150");
bodyElement.appendChild(imgElement); |
중첩 엘리먼트 찾기
HTML 페이지에서 모든 img엘리먼트를 찾아 제거
// Remove all the top-level <img> elements in the body
if (bodyElement.hasChildNodes()) {
for (i=0; i<bodyElement.childNodes.length; i++) {
var currentNode = bodyElement.childNodes[i];
if (currentNode.nodeName.toLowerCase() == "img") {
bodyElement.removeChild(currentNode);
}
} |
getElementsByTagName()을 사용하여 비슷한 효과를 얻을 수 있다.
// Remove all the top-level <img> elements in the body
var imgElements = bodyElement.getElementsByTagName("img");
for (i=0; i<imgElements.length; i++) {
var imgElement = imgElements.item[i];
bodyElement.removeChild(imgElement);
}
|
애트리뷰트 노드
DOM은 애트리뷰트를 노드로서 나타내고 여러분은 언제나 엘리먼트의 attributes 속성을 얻을 수 있다.
// Remove all the top-level <img> elements in the body
var imgElements = bodyElement.getElementsByTagName("img");
for (i=0; i<imgElements.length; i++) {
var imgElement = imgElements.item[i];
// Print out some information about this element
var msg = "Found an img element!";
var atts = imgElement.attributes;
for (j=0; j<atts.length; j++) {
var att = atts.item(j);
msg = msg + "\n " + att.nodeName + ": '" + att.nodeValue + "'";
}
alert(msg);
bodyElement.removeChild(imgElement);
} |
애트리뷰트의 이상한 측면
애트리뷰트는 DOM에 있어서는 조금 특별하다. 애트리뷰트는 다른 엘리먼트나 텍스트의 경우와는 달리 엘리먼트의 자식이 아니다. 다시 말해서 엘리먼트의 밑에 나타나지 않는다. 동시에 이것은 엘리먼트와 관계를 갖고 있다. 엘리먼트는 자신의 애트리뷰트를 소유한다. DOM은 노드를 사용하여 애트리뷰트를 나타내고 이들을 특별한 리스트를 통해 엘리먼트에 대해 사용할 수 있도록 한다. 따라서 엘리먼트는 DOM 트리의 일부지만 이들은 트리에는 나타나지 않는다. DOM 트리 구조의 나머지에 대한 애트리뷰트의 관계는 다소 어지럽다.
attributes 속성은 실제로 엘리먼트 유형이 아닌 노드 유형에 있다. 이것은 코딩에 영향을 주지 않지만 알아둘 필요가 있다.
애트리뷰트 노드에서 작업하는 것이 가능하지만 엘리먼트 클래스에서 사용할 수 있는 메소드를 사용하여 애트리뷰트 작업을 하는 것이 더 쉽다. 메소드는 다음과 같다.
* getAttribute(name)는 name이라는 애트리뷰트의 값을 리턴한다.
* removeAttribute(name)는 name이라는 애트리뷰트를 제거한다.
* setAttribute(name, value)는 name이라는 애트리뷰트를 만들고 이것의 값을 value로 설정한다.
이 세 개의 메소드들로 인해 여러분은 애트리뷰트 노드와 직접 작업할 필요가 없다. 대신 애트리뷰트와 이것의 값과 함께 간단한 스트링 속성을 설정 및 제거할 수 있다.
텍스트 노드
마지막 노드 유형이자 HTML DOM 트리로 작업하는 유형은 텍스트 노드이다. 텍스트 노드와 작업하기 위해 공통적으로 사용하게 될 거의 모든 속성들은 실제로 노드 객체에서도 사용할 수 있다. 사실 nodeValue 속성을 사용하여 텍스트 노드에서 텍스트를 얻을 수 있다.
var pElements = bodyElement.getElementsByTagName("p");
for (i=0; i<pElements.length; i++) {
var pElement = pElements.item(i);
var text = pElement.firstChild.nodeValue;
alert(text);
}
|
몇 가지 다른 메소드들은 텍스트 노드만의 것이다. 이들은 노드에 있는 데이터를 추가하거나 쪼갠다.
* appendData(text)는 여러분이 제공한 텍스트를 텍스트 노드의 기존 텍스트의 끝에 추가한다.
* insertData(position, text)는 텍스트 노드의 중간에 데이터를 삽입할 수 있다. 이것은 지정된 위치에 여러분이 제공한 텍스트를 삽입한다.
* replaceData(position, length, text)는 지정된 위치부터 시작하여 지정된 길이의 문자를 제거하고 여러분이 제공한 텍스트를 제거된 텍스트를 대신하여 메소드에 둔다.
노드의 유형
만일 DOM 트리를 통해 검색하고 일반 노드 유형들로 작업한다면 엘리먼트나 텍스트로 이동했는지의 여부를 모를 것이다. 아마도 p 엘리먼트의 모든 자식들을 갖게 되고, 텍스트, b 엘리먼트, 아니면 img 엘리먼트로 작업하는지 확신할 수 없다. 이 경우 더 많은 일을 하기 전에 어떤 유형의 노드를 가졌는지를 규명해야 한다.
다행히도 이것을 파악하기는 매우 쉽다. DOM 노드 유형은 여려 상수들을 정의한다.
1. Node.ELEMENT_NODE는 엘리먼트 노드 유형에 대한 상수이다.
2. Node.ATTRIBUTE_NODE는 애트리뷰트 노드 유형에 대한 상수이다.
3. Node.TEXT_NODE는 텍스트 노드 유형에 대한 상수이다.
4. Node.DOCUMENT_NODE는 문서 노드 유형에 대한 상수이다.
다른 노드 유형들도 많이 있지만 HTML을 처리할 때에는 이 네 가지 외에는 별로 다루지 않는다.
nodeType 속성
DOM 노드 유형에 대해 정의되었기 때문에 모든 노드에서 사용할 수 있는 nodeType 속성을 사용하여 노드를 위 상수와 비교할 수 있다.
var someNode = document.documentElement.firstChild;
if (someNode.nodeType == Node.ELEMENT_NODE) {
alert("We've found an element node named " + someNode.nodeName);
} else if (someNode.nodeType == Node.TEXT_NODE) {
alert("It's a text node; the text is " + someNode.nodeValue);
} else if (someNode.nodeType == Node.ATTRIBUTE_NODE) {
alert("It's an attribute named " + someNode.nodeName + " with a value of '" + someNode.nodeValue + "'");
} |
이것은 매우 단순한 예제이지만 포인트가 있다. 노드의 유형을 얻는 것은 단순하다. 일단 어떤 유형인지를 알면 노드로 무엇을 할 것인지를 규명해야 한다. 하지만 노드, 텍스트, 애트리뷰트, 엘리먼트 유형이 무엇을 제공하는지 확실히 안다면 DOM 프로그래밍을 직접 할 준비가 된 것이다.
nodeType 속성이 노드로 작업할 수 있는 티켓인 것처럼 들린다. 이것으로 여러분은 어떤 유형의 노드로 작업하고 있는지를 규명하고 그 노드를 다룰 코드를 작성할 수 있다. 문제는 위에 정의된 Node 상수들이 Internet Explorer 상에서는 올바르게 작동하지 않는다는 점이다.
Internet Explorer는 여러분이 자바스크립트에서 Node 상수를 사용할 때 마다 에러를 보고 할 것이다. 거의 모든 사람들이 Internet Explorer를 사용하기 때문에 Node.ELEMENT_NODE 또는 Node.TEXT_NODE 같은 구조를 피해야 한다. Internet Explorer 7.0이 이러한 문제를 정정했다 하지만 Internet Explorer 6.x의 대중성에 미치려면 오랜 시간이 남았다. 따라서 Node 사용을 피해라. 여러분의 DOM 코드(그리고 Ajax 애플리케이션)가 모든 주요 브라우저에서 작동해야 하기 때문이다.
