웹브라우저에서의 객체표현..
DOM 이란?
DOM 트리란?
DOM 효과
DOM 장 단점
--------------------------------------------------------------------------------------------------------
마크업 : 문서에 포함된 문장, 표, 소리 등과 같은 문서의 내용에 대한 정보가 아니라 그 문장과 그림, 표가 어떻게 배치되고 글자는 어떤 크기와 모양을 가지며 , 들여쓰기와 줄간격, 여백은 어느정도인지에 대한 정보를 의미
--------------------------------------------------------------------------------------------------------
브라우저가 웹페이지를 객체 구현으로 변환(DOM 트리)
HTML(hyper text markup language)
마크업은 페이지에 구성 또는 프레임웍만 제공한다.!!
브라우저가 모든 텍스트 구성을 가지고, 이를 변경, 추가, 삭제 가능한 객체로 바꾸는 방법!!
텍스트 마크업의 장점: 페이지가 보여질 때 마다 HTML이 네트워크를 통해 웹 브라우저로 보내진다는 것을 생각해 보라. 텍스트와 함께 전달하는 것 보다 효율적인 방법은 없다. 바이너리 객체, 그래픽으로 구현된 페이지, 재구성된 마크업 청크 등, 이 모든 것들은 플레인 텍스트 파일 보다 네트워크를 통해 전송할 때 더 어려운 것들이다.
텍스트 마크업의 단점: 브라우저에는 비교적 큰 단점을 갖고 있다. 특히 브라우저는 텍스트 마크업을 사용자에게 시각적으로 직접 나타내기가 매우 힘들다.텍스트가 페이지의 마크업을 가져오는 좋은 솔루션이었지만 수정하기도 어렵고, 스타일과 작동을 추가하기에는 불편하고, 궁극적으로 오늘날 웹 페이지의 동적인 특징과 거리가 멀다.
이 문제에 대한 답, 오늘날의 웹 브라우저에 맞는 답은 트리 구조를 사용하여 HTML을 나타내는 것이다.
--------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Trees, trees, everywhere</title>
</head>
<body>
<h1>Trees, trees, everywhere</h1>
<p>Welcome to a <em>really</em> boring page.</p>
<div>
Come again soon.
<img src="come-again.gif" />
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------
head와
body 는 html의 브랜치(branch)라고도 일컬어진다. 이들은 자신들의 자식이 있기 때문에 브랜치이다. 트리의 말단에 다다르면 "Trees, trees, everywhere"와 "really" 같은 텍스트로 가게 된다. 이들은 자식들이 없기 때문에 잎(leave)으로 일컬어진다
1. 트리에 있는 모든 것이 가장 바깥쪽에서 시작되고 HTML의 엘리먼트(
html)를 포함하고 있다는 것이다.트리 메타포에서 루트(root) 엘리먼트라고 불린다. 이것이 트리의 바닥에 있지만 트리를 분석할 때면 언제나 이것부터 시작한다. 완전히 거꾸로 뒤집어보면 도움이 될 것이다.
2. head와
body 엘리먼트는 html 루트 엘리먼트의 자식들이다. 3. title은
head의 자식이고 "Trees, trees, everywhere" 텍스트는 title의 자식이다. 객체 유형과 속성
엘리먼트 이름과 텍스트가 들어있는 작은 직사각형에 집중해 보자. 각 직사각형들은 객체이다
객체를 사용하여 HTML 문서의 조각들을 나타냄으로서 구성을 변경하고, 스타일을 적용하며, JavaScript를 문서에 액세스 시키기가 매우 쉬워진다.
브라우저는 객체 모델을 사용하여 문서를 표현하고 객체 유형에 따라 즉각 구분할 수 있다.
다시 말해서, 웹 브라우저는 이와 같이 객체 속성들을 사용하여 트리의 모양과 구조를 쉽게 변경한다.
엄격함을 유지한다.
p 엘리먼트는 세 개의 다른 자식 객체들을 갖고 있고, 이 중 어떤 것도 전체 "Welcome to a really boring Web page" 텍스트를 포함하고 있지 않다. "Welcome to a "와 " boring Web page" 같은 텍스트의 일부를 볼 수는 있어도 이것이 전체 문장은 아니다. 더욱이 강조된 텍스트인 "really"는
p의 자식 엘리먼트가 아니다. 이것은 p의 자식인 em의 자식이다. "really" 텍스트가 나머지 p 엘리먼트의 텍스트와 함께 디스플레이 되더라도 이것은 여전히 em 엘리먼트의 직접적인 자식이다. 이것은 나머지 p와는 다른 포맷팅을 가질 수 있고 나머지 텍스트와 개별적으로 움직일 수 있다. 애트리뷰트
애트리뷰트는 엘리먼트의 자식이 아니다. 각 엘리먼트는 여기에 사용되는 애트리뷰트 리스트를 갖고 있고 자식 객체의 리스트에서 분리된다. 따라서
div 엘리먼트는 "id" 애트리뷰트와 또 다른 이름 " class "를 포함하고 있는 리스트를 갖게 된다. 하나의 엘리먼트가 두 개의 "id" 또는 두 개의 "class"애트리뷰트를 가질 수 없다.애트리뷰트의 독자성은 리스트를 자식 객체들의 리스트와 구별시킨다.
p 엘리먼트는 그 안에 여러 em 엘리먼트를 갖고 있기 때문에 자식 객체의 리스트에는 중복 아이템이 포함될 수 있다. 자식 리스트와 애트리뷰트 리스트는 비슷하게 작동하지만 하나는 중복을 포함할 수 있고(객체의 자식) 하나는 그럴 수 없다는 것이다. (엘리먼트 객체의 애트리뷰트) 마지막으로 엘리먼트만이 애트리뷰트를 가질 수 있기 때문에 텍스트 객체는 여기에 첨부될 리스트가 없다. --------------------------------------------------------------------------------------------------------
DOM
약어 문제
Document Object Model은 그 동안 Document Node Model로 불려졌다. 물론 대부분의 사람들은 노드(node)라는 단어가 무엇을 의미하는지 모르고, "DNM"은 "DOM"만큼 발음하기 쉬운 것도 아니기 때문에 W3C에서도 DOM이라는 용어를 채택했다.
DOM트리-
HTML과 CSS가 웹 브라우저로 보내지면 이것은 텍스트에서 객체 모델로 변환된다. 브라우저는 제공된 텍스트 파일 보다는 객체 모델을 사용한다. 브라우저가 사용하는 모델을 문서 객체 모델(Document Object Model)이라고 한다. 이것은 문서에 있는 엘리먼트, 애트리뷰트, 텍스트를 나타내는 객체들을 연결한다. HTML과 CSS에 있는 모든 스타일, 값, 심지어 거의 모든 공간들은 객체 모델로 통합된다. 웹 페이지에 대한 특정 모델은 그 페이지의DOM 트리라고 한다. DOM을 통해서 사용자 인터페이스를 변경할 수 있고 인터랙팅 할 수 있다. 이것은 실로 엄청난 프로그래밍의 힘과 유연성을 제공해 준다. 일단 DOM 트리로 작업하는 방법을 배우면 풍부하고 동적인 인터랙티브 웹 사이트를 마스터하는 단계로 넘어갈 수 있다. 즉, DOM은 브라우저가 마크업을 나타낼 수 있도록 하는 객체의 유형과 속성들을 정의한다
W3C에 의해 개발되고 있는 프로그래밍 인터페이스 규격인 DOM은, 프로그래머가 HTML 페이지나 XML 문서들을 프로그램 객체로 만들거나 수정할 수 있도록 해준다. 현재로서, HTML과 XML은 그저 데이터 구조의 형태로 문서를 표현하는 방법일 뿐이다. 이러한 문서들은 마치 프로그램 객체처럼, 자신들의 콘텐츠나, 객체 내에 감추어진 데이터를 가질 수 있게 됨으로써, 문서를 조작할 수 있는 콘트롤을 보장하는데 도움을 줄 수 있게 될 것이다. 문서들은 객체들과 마찬가지로, 메쏘드라고 불리는 객체지향 프로시저(어떤 행동을 수행하기 위한 일련의 작업 순서)들을 함께 가지고 갈 수 있다. DOM은 문서 상에서 프로그래밍 콘트롤을 어떻게 제공할 것인지를 지정하기 위한, 전략적이고 개방된 노력이다. 이것은 다이내믹 HTML이라고 불리는 새로운 HTML과, 웹페이지 및 그 요소들이 브라우저 상에서 일관된 형태로 나타나게 장려하는 방법의 발명에 일부 영향을 받았다.
--------------------------------------------------------------------------------------------------------
DOM 의 계층 구조 2가지
DOM은 두 가지 계층의 인터페이스 구현을 제공하는데, 그 하나는 XML을 지원하는 DOM Core로서 그 다음 계층의 기반이 되며, 다른 하나는 DOM HTML로서 그 모델을 HTML 문서로 확장한 것이다. 아래에 일부 요점이 정리되어 있다.
- 어떠한 HTML이나 XML 요소에 대해서도 프로그래밍을 통한 개별적인 주소지정이 가능할 것이다.
- 이 규격은 IDL을 사용하여 설명하게 될 것이므로, 언어에 독립적일 것이다.
- 그 외에도, 인터페이스는 자바 프로그래밍 언어와 ECMAScript의 형태로 기술될 것이다.
- DOM을 마이크로소프트의 COM이나 DCOM과 혼동해서는 안된다. COM과 CORBA는 객체를 정의하는데 있어 언어에 독립적인 방법이며, 자바와 같은 특정 언어가 할 수 있는 것과 똑같이 DOM 객체를 만드는데 사용될 수 있을 것이다.
--------------------------------------------------------------------------------------------------------
DOM 효과
한 엘리먼트를 DOM 트리에 추가하면 그 엘리먼트는 페이지 리로딩 없이 사용자의 웹 브라우저에 즉시 나타난다. DOM 트리에서 몇몇 텍스트를 제거하면 그 텍스트는 사용자의 스크린에서 사라진다. 여러분은 DOM을 통해서 사용자 인터페이스를 변경할 수 있고 인터랙팅 할 수 있다. 이것은 실로 엄청난 프로그래밍의 힘과 유연성을 제공해 준다.
--------------------------------------------------------------------------------------------------------
노드개념 배우기!
DOM 트리는 객체의 트리지만 보다 구체적으로는 노드 객체들의 트리이다
Ajax 애플리케이션 또는 JavaScript에서 그러한 노드들과 작업하여 엘리먼트와 이것의 콘텐트를 지우고 특정 텍스트 조각을 강조하고 새로운 이미지 엘리먼트를 추가하는 등 특별한 효과를 만들 수 있다. 이 모든 것은 클라이언트 측(웹 브라우저에서 실행되는 코드)에서 발생하기 때문에 이러한 효과는 서버와 통신 없이 즉시 발생한다. 결국 보다 반응성 있는 애플리케이션이 될 것이다.
--------------------------------------------------------------------------------------------------------
크로스 브라우저, 크로스 언어
Document Object Model은 W3C 표준이다. 따라서 모든 현대의 웹 브라우저는 DOM을 지원하고 있다. 브라우저 간 차이는 있겠지만 핵심 DOM 기능을 사용한다면 어떤 브라우저 상에서도 같은 방식으로 작동할 것이다
DOM은 크로스 언어(cross-language) 스팩이기도 하다.
다시 말해서 대부분의 프로그래밍 언어에서 이것을 사용할 수 있다. W3C는 DOM을 위한 여러 언어 바인딩을 정의하고 있다. 언어 바인딩은 단순한 API로서 특정 언어에 DOM을 사용할 수 있도록 해준다.
--------------------------------------------------------------------------------------------------------
개념상의 노드
1. 노드는 DOM에서 가장 기본적인 객체 유형이다. (DOM에 의해 정의된 거의 모든 객체는 노드 객체를 확장한다.)
2. 모든 애트리뷰트는 하나의 노드이다.(모든 텍스트 조각도 하나의 노드이다,심지어 카피라이트 상징을 나타내는 © 같은 특별 문자도 모두 노드이다 )
노드란? 노드는 DOM 트리에 있는 그저 단순한 하나의 존재이다
(@ DOM 트리에 있는 각 엘리먼트와 텍스트 조각이 부모를 갖고 있다고 생각해 보자. 부모는 또 다른 엘리먼트의 자식일 수도 있고(img가 p 엘리먼트 안에 중첩될 때) 또는 DOM 트리의 가장 위에 있는 엘리먼트일 수 있다. (이것은 각 문서에 대해 단 한번의 특별한 경우이고 이곳에서 html 엘리먼트를 사용한다.) 또한 엘리먼트와 텍스트 모두 type을 갖고 있다고 생각해 보라. 한 엘리먼트의 type은 분명히 하나의 엘리먼트이다. 텍스트의 type은 텍스트이다. 각 노드는 또한 정의가 잘된 구조를 갖고 있다. 이 밑에 자식 엘리먼트 같은 하나의 노드(또는 노드들)을 갖는가? 이것이 자매 노드(sibling node) (엘리먼트나 텍스트 옆에 있는 노드)를 갖는가? 각 노드에는 어떤 문서에 속하는가?
다분히 추상적으로 들린다. 사실 엘리먼트의 유형은 음… 엘리먼트이다 라고 말하는 것은 어리석어 보인다. 하지만 일반 객체 유형으로서 노드를 갖는다는 것의 가치는 추상적으로 이해해야 한다. )
노드의 속성
DOM 노드의 핵심 속성
--------------------------------------------------------------------------------------------------------
nodeName은 노드의 이름을 나타낸다. (아래 참조)
nodeValue:는 노드의 "값"을 제공한다. (아래 참조)
parentNode는 노드의 부모를 리턴한다. 모든 엘리먼트, 애트리뷰트, 텍스트는 부모 노드를 갖고 있다는 것을 기억하라.
childNodes는 노드의 자식들의 리스트이다. HTML로 작업할 때 엘리먼트를 다룰 경우 이 리스트는 유용하다. 텍스트 노드와 애트리뷰트 노드는 어떤 자식도 갖지 않는다.
firstChild는 childNodes 리스트에 있는 첫 번째 노드로 가는 지름길이다.
lastChild도 또 다른 지름길이다. childNodes 리스트에 있는 마지막 노드로 가는 지름길이다.
previousSibling은 현재 노드 앞에 있는 노드를 리턴한다. 다시 말해서, 현재 것 보다 앞에 있는 노드를 리턴한다. 현재 노드의 부모의 childNodes 리스트에 있는 것 보다 선행하는 노드를 리턴한다. (헷갈린다면 마지막 문장을 다시 한번 더 읽어라.)
nextSibling은 previousSibling 속성과 비슷하다. 부모의 childNodes 리스트에 있는 다음 노드로 돌린다.
attributes는 엘리먼트 노드에서 유일하게 유용한 것이다. 엘리먼트의 애트리뷰트 리스트를 리턴한다--------------------------------------------------------------------------------------------------------
nodeName과
nodeValue는 실제로 모든 노드 유형에 적용되는 것은 아니다. (한 노드 상의 다른 속성들의 경우도 마찬가지다.) 이 속성들은 null 값을 리턴할 수 있다. (JavaScript에서는 "undefined"로 나타난다.)
노드의 메소드
DOM 노드의 핵심 메소드
--------------------------------------------------------------------------------------------------------
insertBefore(newChild, referenceNode)는newChild노드를referenceNode앞에 삽입한다.newChild의 미래의 부모에 대해 이것을 호출할 것이다.replaceChild(newChild, oldChild)는oldChild노드를newChild노드로 교체한다.removeChild(oldChild)는 함수가 실행되고 있는 노드에서oldChild노드를 제거한다.appendChild(newChild)는newChild노드를 이 함수가 실행되고 있는 노드에 추가한다.newChild는 목표 노드의 자식들의 끝에 추가된다.hasChildNodes()는 호출된 노드가 자식을 갖고 있을 경우 true를 , 그렇지 않을 경우 false를 리턴한다.hasAttributes()는 호출된 노드가 애트리뷰트를 갖고 있을 경우 true를, 애트리뷰트가 없을 경우 false를 리턴한다.
--------------------------------------------------------------------------------------------------------
ex)
--------------------------------------------------------------------------------------------------------
일반 노드 유형들
- 문서 노드는 전체 HTML 문서를 나타낸다.
- 앨리먼트 노드는 a 또는 img 같은 HTML 엘리먼트를 나타낸다.
- 애트리뷰트 노드는 href (a 엘리먼트에 대해) 또는 src (img 엘리먼트에 대해) 같은 HTML 엘리먼트에 대한 애트리뷰트를 나타낸다.
- 텍스트 노드는 "Click on the link below for a complete set list" 같은 HTML 문서에 있는 텍스트를 나타낸다. 이는 p, a, h2 같은 엘리먼트 내부에 나타나는 텍스트이다.
문서 노드
첫번째 노드 유형은 DOM 기반 코드의 거의 모든 부분에서 여러분이 사용하게 될 유형이다. 바로 문서 노드이다. 문서 노드는 실제로 HTML(또는 XML) 페이지에 있는 엘리먼트가 아니라 페이지 그 자체이다. 따라서 HTML 웹 페이지에서 문서 노드는 전체 DOM 트리이다. 자바스크립트에서 document 키워드를 사용하여 문서 노드에 액세스 할 수 있다.
자바스크립트의 document 키워드는 현재 웹 페이지에 대한 DOM 트리를 리턴한다.여기에서부터 여러분은 트리에 있는 모든 노드들과 작업할 수 있다.
또한 document 객체를 사용하여 다음과 같은 메소드를 사용하는 새로운 노드를 만들 수 있다.
createElement(elementName)는 제공된 이름을 가진 엘리먼트를 만든다.createTextNode(text)는 제공된 텍스트를 가진 새로운 텍스트 노드를 만든다.createAttribute(attributeName)는 제공된 이름을 가진 새로운 애트리뷰트를 만든다.
여기에서 주목해야 할 것은 이러한 메소드들이 노드를 만들지만 이들을 첨부하거나 이들을 특정 문서에 삽입하지 않는다는 점이다. 따라서 이미 봤던 insertBefore() 또는 appendChild() 같은 메소드들 중 하나를 사용해야 한다. 따라서 다음과 같은 코드를 사용하여 새로운 엘리먼트를 만들어 문서에 붙여야 한다.
--------------------------------------------------------------------------------------------------------
var myDocument = document;
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 트리에 액세스 하면 엘리먼트, 애트리뷰트, 텍스트와 직접 작업할 준비가 된 것이다.
엘리먼트 노드
모든 노드들에 공통적인 메소드와 속성들이 포함
- 애트리뷰트와 작동하는 것과 관련된 메소드: :
getAttribute(name)는name이라는 애트리뷰트의 값을 리턴한다.removeAttribute(name)는name이라는 애트리뷰트를 제거한다.setAttribute(name, value)는name이라는 애트리뷰트를 만들고 이것의 값을value로 설정한다.getAttributeNode(name)는name라고 하는 애트리뷰트 노드를 리턴한다. (애트리뷰트 노드는 아래에서 설명한다.)removeAttributeNode(node)는 제공된 노드와 매치되는 애트리뷰트 노드를 제거한다.
- 중첩된 엘리먼트를 찾는 메소드: :
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);
--------------------------------------------------------------------------------------------------------
중첩 엘리먼트 찾기
getElementsByTagName()을 사용
--------------------------------------------------------------------------------------------------------
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);
}
--------------------------------------------------------------------------------------------------------
애트리뷰트 노드에서 작업하는 것이 가능하지만 엘리먼트 클래스에서 사용할 수 있는 메소드를 사용하여 애트리뷰트 작업을 하는 것이 더 쉽다. 메소드는 다음과 같다.
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 노드 유형은 여려 상수들을 정의한다.
Node.ELEMENT_NODE는 엘리먼트 노드 유형에 대한 상수이다.Node.ATTRIBUTE_NODE는 애트리뷰트 노드 유형에 대한 상수이다.Node.TEXT_NODE는 텍스트 노드 유형에 대한 상수이다.Node.DOCUMENT_NODE는 문서 노드 유형에 대한 상수이다.
다른 노드 유형들도 많이 있지만 HTML을 처리할 때에는 이 네 가지 외에는 별로 다루지 않는다. 이들 상수의 값이 DOM 스팩으로 정의되었지만 의도적으로 남겨두었다. 여러분은 이 값으로 절대 직접 처리해서는 안된다. 바로 이것 때문에 상수가 있는 것이니까.
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 + "'");
}
--------------------------------------------------------------------------------------------------------
Internet Explorer는 여러분이 자바스크립트에서 Node 상수를 사용할 때 마다 이러한 에러를 보고 할 것이다. 거의 모든 사람들이 Internet Explorer를 사용하기 때문에 Node.ELEMENT_NODE 또는 Node.TEXT_NODE 같은 구조를 피해야 한다. Internet Explorer 7.0이 이러한 문제를 정정했다 하지만 Internet Explorer 6.x의 대중성에 미치려면 오랜 시간이 남았다. 따라서 Node 사용을 피해라. 여러분의 DOM 코드(그리고 Ajax 애플리케이션)가 모든 주요 브라우저에서 작동해야 하기 때문이다.
'HomeWork' 카테고리의 다른 글
| Thread ^^;; (0) | 2009.12.23 |
|---|---|
| JSON#2(JavaScript Object Notation) (0) | 2009.12.22 |
| JSON 데이터 (0) | 2009.12.22 |
| JQuery- (0) | 2009.12.15 |
| Ajax- (0) | 2009.12.15 |