本文共 3849 字，大约阅读时间需要 12 分钟。

一、ＤＯＭ对象：

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

　　通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

　　JavaScript 能够改变页面中的所有 HTML 元素 　　JavaScript 能够改变页面中的所有 HTML 属性 　　JavaScript 能够改变页面中的所有 CSS 样式 　　JavaScript 能够对页面中的所有事件做出反应

　　而对HTML的修改，很多要通过DOM对象的操作来实现的

二、常用操作：

　查找节点：

　　１、getElementById(elementId)

　　　//寻找一个有着给定id属性值的元素，返回一个元素节点

　　２、getElementsByTagName(tagName)

　　　//用于寻找有着给定标签名的所有元素

　　３、getElementsByName(elementName)

　　　//在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可

　综合实例：

　创建节点

　　１、document.createElement(element)

　　　//参数为要新添的节点标签名

　　２、document.createTextNode(string)

　　　//创建一个包含着给定文本的新文本节点

　综合实例：

　添加节点:

　　１、//添加子节点：

　　　node.appendChild(newChild) //newChild为生新增的节点

　　２、//插入节点

　　　node.insertBefore(newNode,targetNode)；

　　　node.insertAfter(newNode,targetNode);

　综合实例：

　删除节点：

　　１、//删除节点node.removeChild(node) 

　　２、//IE支持，但FF不支持,node.removeNode()推荐用removeChild代替实现

　综合实例：

三、常用节点属性：

　　1、.nodeName//只读，返回节点名称，相当于tagName.

　　2、.nodeValue//可读可写，但对元素节点不能写。返回一个字符串，指示这个节点的值。元素节点返回null，

属性节点返回属性值，文本节点返回文本。一般只用于设置文本节点的值。

　　3、.nodeType//只读，返回节点类型：1，元素节点；2，属性节点；3，文本节点。　

　　4、node.contains() //是否包含某节点，返回boolean值,IE支持，FF不支持contains()，但支持W3C标准

　　5、node.hasChildNodes()//是否有子节点，返回boolean值　

　综合实例：　　

四、ＤＯＭ小结

　　DOM 定义了访问和操作 HTML 文档的标准方法。而各个浏览器因为其内核的不同，因而对DOM元素解析也不尽相同，因此具体的应用，还需要在具体的实践中积累，文章所列举的一些DOM方法或是属性，都是一些最常用的，至于更全面的，更详细的，送个福利吧（）