JavaScript DOM 학습 1장 W3C DOM 기본 지식 소개

이 장에서는 주로 차세대 브라우저에서 지원되는 W3C 1차 DOM을 소개합니다. 작동 방식에 대한 일반적인 아이디어를 제공하고 이를 사용하여 무엇을 할 수 있는지에 대한 아이디어를 제공합니다.
먼저 DOM에 대한 몇 가지 제안과 DOM 디자인의 목적을 설명한 다음, 노드가 무엇인지, DOM 트리를 통해 노드를 탐색하는 방법을 알려드리겠습니다. 다음은 특정 노드를 얻는 방법과 그 값과 속성을 변경하는 방법입니다. 마지막으로 DOM의 궁극적인 목표는 자신만의 새로운 노드를 생성하는 방법입니다.
권장 사항
레벨 1DOM은 XML 문서에 액세스하기 위한 모든 프로그래밍 언어를 제공하기 위해 W3C에서 개발되었습니다. XML 문서를 처리하는 데 어떤 언어 프로그램을 사용하더라도 그것이 레벨 1DOM의 메서드와 속성이라면 가능합니다. Perl, VBScript, JavaScript 등 원하는 값을 읽고 수정할 수 있습니다.
짐작할 수 있듯이 이 단락은 이상적인 상황을 설명하며 브라우저 등의 차이점은 여전히 ​​존재합니다. 그러나 이 부분의 내용은 아직 상대적으로 작기 때문에 JavaScript에서 XML을 처리하는 방법을 배우는 것도 다른 언어 학습에 도움이 될 것입니다.
HTML은 어느 정도 XML 문서로 간주될 수도 있습니다. 브라우저가 해당 스크립트를 처리할 수 있는 한 레벨 1 DOM은 HTML에서도 매우 잘 실행될 수 있습니다.
각 HTML 태그의 텍스트와 속성을 읽을 수 있고, 각 태그와 해당 내용을 삭제할 수 있으며, 서버에서 수정하지 않고도 실시간으로 기존 문서에 새 태그를 삽입할 수도 있습니다.
XML을 수정하는 모든 측면은 디자인 초기에 고려되어야 하기 때문에 일반 웹 엔지니어가 절대 사용하지 않는 방법도 있습니다. 예를 들어 HTML 주석을 수정하는 데 사용할 수 있지만 왜 이렇게 하려는지 모르겠습니다. 웹 디자인에 필요하지 않은 DTD/Doctype 콘텐츠에 대한 DOM 처리도 있으므로 이를 무시하고 일상적인 요구 사항에 집중하세요.
노드
문서 개체 모델은 문서 내의 여러 요소가 서로 어떻게 관련되어 있는지 보여주는 모델입니다. 레벨 1 DOM에서는 모든 객체가 노드입니다. 그래서 다음과 같이 쓴다면:

코드를 복사하세요 코드는 다음과 같습니다:

이것은 문단 p>

그런 다음 두 개의 노드, 즉 요소 P와 내용이 "This is a단락"인 텍스트 노드를 만듭니다. 이 텍스트 노드는 P 요소 내에 포함되어 있으므로 p 노드의 하위 노드로 간주될 수 있습니다. 반대로 p 요소는 텍스트 노드의 상위 노드입니다.
라고 쓰면

코드 복사 코드는 다음과 같습니다.

이것은 < ;B>단락

입니다.

그러면 요소 노드 p에는 두 개의 하위 노드가 있으며 그 중 하나에는 자체 하위 노드가 있습니다.
마지막은 매개변수 노드입니다. (혼란스럽게도 그들은 요소 노드의 자식으로 간주되지 않습니다. 사실 이 장을 쓰는 동안 몇 가지 테스트를 했는데 IE5는 매개 변수 노드를 요소의 자식으로 전혀 처리하지 않습니다.) 따라서:

코드 복사 코드는 다음과 같습니다.

이것은 단락

의 구조는 다음과 같습니다:

       <p> ----------------<br><br>     --------------     ALIGN<br><br>  This is a     <b>     |<br>            |    right<br><br>          paragraph</b></p>

요소 노드, 텍스트 노드, 매개변수 노드입니다. HTML 페이지의 99%는 이들로 구성되어 있으며 주요 작업은 이를 배치하는 것입니다. 물론, 지금은 건너뛰게 될 다른 노드도 많이 있습니다.

아시다시피 p 요소에는 일반적으로 문서인 자체 상위 노드도 있지만 때로는 DIV일 수도 있습니다. 따라서 전체 문서는 많은 노드로 구성된 트리로 볼 수 있으며 이러한 노드의 대부분은 자체 하위 노드를 갖습니다.

      <br><br>        |-------------------------------------<br><br>       <p> ----------------      lots more nodes<br><br>     --------------     ALIGN<br><br>  This is a     <b>     |<br>            |    right<br><br>          paragraph</b></p>

DOM 트리 탐색
DOM 트리의 구조를 알고 나면 이를 탐색하여 원하는 요소를 찾을 수 있습니다. 예를 들어, 요소 노드 p가 이미 변수 x에 저장되어 있다고 가정합니다(이 작업이 어떻게 수행되는지 잠시 후에 설명하겠습니다). 이때 BODY에 접근하고 싶다면

코드 복사 코드는 다음과 같습니다.

x. parentNode

x의 상위 요소를 가져온 다음 이를 수정할 수 있습니다. 이 방법으로 노드 B에 도달할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

x.childNode[ 1]

childNode는 x의 모든 하위 노드를 포함하는 배열입니다. 물론 배열의 번호는 0부터 시작하므로 childNode[0]는 "This is a"라는 텍스트 노드입니다. childNode[1]은 B 노드입니다.
두 가지 특수 항목: x.firstChild는 x의 첫 번째 하위 노드를 나타내고 x.lastChild는 x의 마지막 하위 노드를 나타냅니다.
p가 BODY의 첫 번째 하위 노드이고 BODY가 문서의 첫 번째 하위 노드라고 가정합니다. 따라서 노드 B에 도달하려면 다음 방법 중 하나를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

document.firstChild.firstChild.lastChild
document.firstChild.childNodes[0] .lastChild;
document.firstChild.childNodes[0].childNodes[1];

심지어 이 멍청한 놈도:

복사 code 코드는 다음과 같습니다:

document.firstChild.childNodes[0].parentNode.firstChild.childNodes[1];

요소를 가져옵니다. 🎜>그런데 이런 식으로 문서를 순회하는 것은 너무 번거롭습니다. 레벨 1 DOM 설계의 목표는 전체 DOM 트리를 수정하는 것이므로 DOM 트리의 구조를 정확하게 알아야 하며, 이로 인해 몇 가지 문제가 빠르게 발생할 수 있습니다.
그래서 원하는 요소에 빠르게 접근할 수 있는 몇 가지 방법이 있습니다. 여기에 도착하면 전체 DOM 트리의 모든 노드를 탐색할 수 있습니다.
앞의 예를 계속 진행하겠습니다. 요소 B에 도달하려고 합니다. 가장 쉬운 방법은 그냥 뛰어넘는 것입니다. document.getElementByTagName을 사용하면 문서의 모든 B 태그를 포함하는 배열을 빠르게 만들 수 있습니다. B가 첫 번째라고 가정하면 다음과 같이 간단히 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var x = document.getElementsByTagName('B')[0]

x에는 요소 노드 B가 포함되어 있습니다. 먼저 전체 문서의 모든 요소 B(document.getElementByTagName('B'))를 가져오도록 브라우저에 지시한 다음 첫 번째 문서의 첫 번째 요소 B([0])를 선택하면 원하는 것을 얻을 수 있습니다. .
다음과 같이 작성할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

var x = document .getElementsByTagName( 'P')[0].lastChild;

이제 먼저 문서의 첫 번째 단락 P에 도달한 다음(P가 첫 번째 요소라고 가정) p의 마지막 하위 요소에 도달합니다.
DOM 구조 없이 요소에 정확하게 도달하는 가장 좋은 방법은 B에게 ID를 제공하는 것입니다.

이것은 단락<입니다. ;/B>

이제 다음과 같이 간단히 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var x = document.getElementById('hereweare');

요소 B는 x에 저장됩니다.
노드 수정
이제 노드에 도달했으므로 몇 가지 수정 작업을 수행할 수 있습니다. 굵은 텍스트 비트를 '굵은 텍스트'로 변경하고 싶다고 가정해 보겠습니다. 올바른 요소에 액세스하고 해당 요소의 nodeValue를 수정해야 합니다. 이제 올바른 요소는 요소 B가 아니라 해당 하위 요소 텍스트 노드입니다. 우리가 변경하려는 것은 요소가 아니라 텍스트입니다. 따라서 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

document.getElementById('hereweare' ).firstChild.nodeValue='굵은 텍스트';

요소가 변경됩니다.
nodeValue를 통해 텍스트 노드나 매개변수를 수정할 수 있습니다. 예를 들어 단락의 ALIGN 매개변수를 수정할 수 있습니다. 이 방법도 매우 간단합니다. 먼저 필요한 요소(이 경우 B 요소의 상위 요소)를 찾은 다음 setAttribute() 메서드를 사용하여 원하는 값을 설정합니다.

코드 복사 코드는 다음과 같습니다.

function test2(val) {

if (document.getElementById && document.createElement)
{
node = document.getElementById('hereweare').parentNode;
node.setAttribute('align',val);
}
else Alert('브라우저가 해당 레벨을 지원하지 않습니다. 1 DOM');
}


创建和删除元素
修改元素固然有用，但是还是不如创建你需要的元素然后插入到现有的文档中。我可以很简单的在这个段落后面添加一个HR元素然后很简单的删除它。
创建元素使用下面的方法:
var x=document.createElemnt(‘HR')
这样HR就创建并且存储在x中。第二步就是把x插入到文档之中。我写了一个ID是inserthere的SPAN，我们就把它插入到这。所以我们使用appendChild()方法：

复制代码 代码如下:

document.getElementById('inserthrhere').appendChild(x);

删除它稍稍有点麻烦。我先创建一个临时变量node来存储SPAN，然后我告诉他移除他的第一个子元素：

复制代码 代码如下:

var node=document.getElementById(‘inserthere');
node.removeChild(node.childNode[0]);

同样的方法我们也可以创建一个新的元素然后添加在ID是hereweare的B元素上。

复制代码 代码如下:

var x = document.createTextNode(' A new text node has been appended!');
document.getElementById('hereweare').appendChild(x);

你可以试一试，你会注意到用老的办法可能不会移除新加的文本，那是因为他们已经成为分离的两部分了：

 <b><br><br> ------------<br><br> paragraph A new text node<br> has been appended!</b>

(可以通过normalize()来把他们合并，但是IE5不支持）

我不打算告诉你怎么移除它，自己练习会比较有收获

翻译地址：http://www.quirksmode.org/dom/intro.html

转载请保留以下信息
作者：北玉(tw:@rehawk)