DOM编程

全称Document Object Model，即文档对象模型
document代表当前页面的整个文档树。

对象的集合：
all 获取页面所有元素对象
forms 获取页面所有表单对象
images 获取页面所有图片对象
links 获取所有超链接或area对象

示例：

<script type="text/javascript">// 获取dom 树, 获取document 对象.var dom = window.document;// all 获取页面中所有的标签节点 ,注释和文档类型约束.function testAll() {    var allArr = dom.all;    alert(allArr.length);    for (var i = 0; i < allArr.length; i++) {        //获取节点名称        alert(allArr[i].nodeName);    }}// anchors 获取页面中的所有的锚连接.function testAnchors() {    var anArr = dom.anchors;    alert(anArr.length);}// froms  获取所有的form 表单对象function testForms() {    var formArr = dom.forms;    alert(formArr.length);    alert(formArr[0].nodeName);}// imagesfunction testImages() {    var imageArr = dom.images;    alert(imageArr.length);}// links  获取页面的超链接.function testLinks() {    var linkArr = dom.links;    //alert(linkArr.length);    for (var i = 0; i < linkArr.length; i++) {        //alert(linkArr[i].nodeName);    }    for (var i in linkArr) {        alert(i);    }}

1、获取节点对象

document.getElementById(“html元素的id”)
document.getElementsByTagName(“标签名”)
document.getElementsByName(“html元素的name”)

2、通过节点关系查找节点

从一个节点出发开始查找：

parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）
（注意这里子元素会包含空文本）

3、获取节点对象的信息

每个节点都包含的信息的，这些属性是：

nodeType： 节点类型
nodeName： 节点名称
nodeValue ： 节点值

4、节点操作

创建新节点

document.createElement("标签名")       创建新元素节点elt.setAttribute("属性名", "属性值")  设置属性    elt.appendChild(e)                      添加元素到elt中最后的位置elt.insertBefore(new, child);           添加到elt中，child之前。 // 参数1：要插入的节点  参数2：插入目标元素的位置    elt.removeChild(eChild)                 删除指定的子节点