DOM学习均来自菜鸟教程，对其进行整理：http://www.runoob.com/htmldom/htmldom-tutorial.html

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

<p id="intro">Hello World!</p>
 
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>

getElementById 是一个方法，而 innerHTML 是属性。

HTML DOM 访问

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素：

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法：（标签）
通过使用 getElementsByClassName() 方法

document.getElementsByTagName("p");

DOM 访问元素

添加、删除和替换 HTML 元素。

创建新的 HTML 元素 - createElement()

如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

这段代码创建了一个新的 <p> 元素：
如需向 <p> 元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：
然后您必须向 <p> 元素追加文本节点：

         para.appendChild(node); 
  

4. 最后，您必须向已有元素追加这个新元素。

这段代码查找到一个已有的元素：

         var element=document.getElementById("div1"); 
  

这段代码向这个已存在的元素追加新元素：

         element.appendChild(para); 
  

如果采用element.insertBefore(para,child);那么就会插到前面。

删除已有的 HTML 元素

如需删除 HTML 元素，您必须清楚该元素的父元素：

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

    var child=document.getElementById("p1"); 
   
child.parentNode.removeChild(child);

替换 HTML 元素

如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

HTML DOM 导航

通过 HTML DOM，您能够使用节点关系在节点树中导航。

HTML DOM 节点列表

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

下面的代码选取文档中的所有 <p> 节点：

var x=document.getElementsByTagName("p");
y=x[1];

可以通过下标号访问这些节点。如需访问第二个 <p>，您可以这么写：

注意：

下标号从 0 开始。

HTML DOM 节点列表长度

length 属性定义节点列表中节点的数量。

您可以使用 length 属性来循环节点列表：

x=document.getElementsByTagName("p");

for (i=0;i<x.length;i++){

       document.write(x[i].innerHTML);

 document.write("<br>");}

导航节点关系

您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。

首个 <p> 元素是 <body> 元素的首个子元素（firstChild）
<div> 元素是 <body> 元素的最后一个子元素（lastChild）
<body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）

firstChild 属性可用于访问元素的文本：

DOM 根节点

这里有两个特殊的属性，可以访问全部文档：

document.documentElement - 全部文档
document.body - 文档的主体

childNodes 和 nodeValue

除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

下面的代码获取 id="intro" 的 <p> 元素的值：

<p id="intro">Hello World!</p>
 
<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

在上面的例子中，getElementById 是一个方法，而 childNodes 和 nodeValue 是属性。

DOM的属性、访问方法