Using the W3C DOM Level 1 Core

这篇翻译不完整。请帮忙从英语翻译这篇文章

W3C 的 Dom Level 1 核心是一个用于修改文档内容树的强大的对象模型。它被所有主流浏览器支持着,包括火狐浏览器和微软IE浏览器。它是网页脚本编程的强大基础。

什么是内容树?

很多HTML作者认为HTML是平面的东西 -- 一堆文字被标签包围在中间。当然还有比这个更多的内容。任何HTML文档 (或者说任何SGML文档或者 XML 文档) 是一个树状结构. 比如, 以下的文档 和树状结构是相似的 (虽然不是完全一致 -- 更多信息请参考 whitespace in the DOM):

<html>
<head>
  <title>My Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>Paragraph</p>
</body>
</html>

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

当Mozilla解析文档的时候, 它首先构建一个内容树然后用它来显示这个文档.

用于描述树状结构的术语通常出现在DOM Level 1的核心中。 我上面画的每一个方块都是这个树的一个节点。 节点上面的线条表示父子关系: 上面的父节点, 而位于下方的是子节点. 位于一个父节点下面的两个子节点是相邻的。 Similarly, one can refer to ancestors and descendants. (Cousins are too messy, though.)

What does the DOM Level 1 Core let me do?

The W3C DOM Level 1 allows you to change the content tree any way you want. It is powerful enough to build any HTML document from scratch. It allows authors to change anything in the document from script, at any time. The easiest way for web page authors to change the DOM dynamically is using JavaScript. In JavaScript, the document is accessible the same way it has been in older browsers: from the document property of the global object. This document object implements the Document interface from the W3C's DOM Level 1 spec.

A simple example

Suppose the author wants to take the above document and change the contents of the header, and write two paragraphs instead of one. The following script would do the job:

HTML Content

<body>
<input type="button" value="Change this document." onclick="change()">
<h2>Header</h2>
<p>Paragraph</p>
</body>

JavaScript Content

  function change() {
    // document.getElementsByTagName("H2") returns a NodeList of the <h2>
    // elements in the document, and the first is number 0:
    
    var header = document.getElementsByTagName("H2").item(0);
    // the firstChild of the header is a Text node:
    header.firstChild.data = "A dynamic document";
    // now the header is "A dynamic document".
    
    var para = document.getElementsByTagName("P").item(0);
    para.firstChild.data = "This is the first paragraph.";
    
    // create a new Text node for the second paragraph
    var newText = document.createTextNode("This is the second paragraph.");
    // create a new Element to be the second paragraph
    var newElement = document.createElement("P");
    // put the text in the paragraph
    newElement.appendChild(newText);
    // and put the paragraph on the end of the document by appending it to
    // the BODY (which is the parent of para)
    para.parentNode.appendChild(newElement);
  }

You can see this script as a complete example.

How can I learn more?

Now that you are familiar with the basic concepts of the DOM, there is a document explaining the DOM Level 1 fundamental methods. It is the follow-up to this document.

See also the DOM Level 1 Core specification from the W3C. It's a reasonably clear spec, although it is formal. The main thing that's useful to authors is the description of the different DOM objects and all their properties and methods. Also see our other DOM documentation.

Original Document Information

  • Author(s): L. David Baron <dbaron at dbaron dot org>
  • Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license

 

文档标签和贡献者

 此页面的贡献者: EugeneZeng
 最后编辑者: EugeneZeng,