DOM

概念：HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 将 HTML 文档表达为树结构。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

整个文档是一个文档节点，每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点

父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

1.访问 HTML 元素（节点）

getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素：html中，<p id="intro"></p> 对应js中var element=document.getElementById("intro");

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。document.getElementsByTagName("p");

getElementsByClassName() 方法

查找带有相同类名的所有 HTML 元素document.getElementsByClassName("intro");

getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

2.innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

<p id="intro">Hello World</p>,获取元素内容：

var txt  =  document.getElementById("intro").innerHTML;

document.getElementById("intro").innerHTML = “可替换的文字”;

3.nodeName 属性

nodeName 属性规定节点的名称。nodeName 是只读的，元素节点的 nodeName 与标签名相同，属性节点的 nodeName 与属性名相同，文本节点的 nodeName 始终是 #text，文档节点的 nodeName 始终是 #document，nodeName 始终包含 HTML 元素的大写字母标签名。例如<button>对应的nodeName是“BUTTON”

4.nodeValue 属性

nodeValue 属性规定节点的值。元素节点的 nodeValue 是 undefined 或 null,文本节点的 nodeValue 是文本本身,属性节点的 nodeValue 是属性值

5.改变 HTML 样式

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color="blue";

6.appendChild创建新的 HTML 元素,如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

    var para=document.createElement("p");这段代码创建了一个新的

元素<p>：

   var node=document.createTextNode("This is new.");//如需向<p>

元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：

   para.appendChild(node);//然后您必须向<p>

元素追加文本节点：

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

   element.appendChild(para);最后，您必须向已有元素追加这个新元素。

 insertBefore()

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

    element.insertBefore(para,child);

removeChild()

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

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

      parent.removeChild(child);

replaceChild()

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

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

       parent.replaceChild(para,child);