HTML DOM 教程

HTML DOM 属性和方法

HTML DOM 的属性和方法定义了应用HTML DOM的程序接口

程序接口

在DOM中，HTML文档由一系列的节点对象node object组成。这些节点可以通过JavaScript或其他程序语言来访问。在这里的教程中，我们使用的是JavaScript脚本访问HTML DOM 节点。

DOM的程序接口是由标准属性和方法来定义的。

HTML DOM属性通常指的是什么东西是什么？(比如节点的名称)。

HTML DOM方法通常是指某物做了什么动作？(比如移除一个节点)。

HTML DOM属性

以下是一些DOM属性：

  • x.innerHTML - x节点的文本值text value
  • x.nodeName - x节点的名称name
  • x.nodeValue - x节点的值value
  • x.parentNode - x节点的父节点parent node
  • x.childNodes - x节点的子节点child nodes
  • x.attributes - x节点的属性节点attributes nodes

注意：在上面的列表中，x是一个节点对象(即一个HTML元素)。

HTML DOM方法

以下是一些DOM方法：

  • x.getElementById(id) - 通过一个指定的id获取元素element
  • x.getElementsByTagName(name) - 通过一个指定的标记名称tag name获取所有的标记元素。
  • x.appendChild(node) - 给x插入一个子节点child node
  • x.removeChild(node) - 从x中移除一个子节点child node

注意：在上面的列表中，x是一个节点对象(即一个HTML元素)。

innerHTML属性

需要获取或修改一个元素的内容content最简单的方法就是使用innerHTML属性。

innerHTML不是W3C DOM规范的一部分。不过没有关系，基本上所有的主流浏览器都支持innerHTML属性。

innerHTML属性在返回或替换HTML元素的内容时非常有用，甚至包括<html> 和 <body>这两个HTML元素。同时，它还可以用来查看一个被动态修改的页面的源代码。我们看下面的例子：

<html>
<body>

<p id="intro">Hello World!</p>
<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
</script>

</body>
</html>

上面的代码从一个id为"intro"的<p>标签元素中获取它的innerHTML(文本text)。其中getElementById就是一个HTML DOM方法，innerHTML是一个HTML DOM属性。

childNodes 和 nodeValue

同样，我们可以使用childNodes 和 nodeValue属性来获得元素element的值value。

下面的代码取得一个id为"intro"的<p>标签元素的值。

<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
</script>
</body>
</html>

在上面的实例中，getElementById是一个HTML DOM方法，childNodes 和 nodeValue是属性。

在这里的教程中，我们主要应用了innerHTML属性。不过，学习上面的方法对于理解DOM的树形结构和处理XML文档是非常有用的。

HTML DOM 节点树 HTML DOM 节点树  HTML DOM 访问节点HTML DOM 访问节点 HTML DOM 访问节点