JavaScript中DOM对象的详解

*** JavaScript中DOM对象的详解***

DOM对象：Document Object Model，文档对象模型。也称为document（文档对象），是HTML页面当前窗体的内容，是连接JS与html的重要对象，同时也是JavaScript重要组成部分之一。由于HTML文档可以看做是一个节点树。DOM HTML指的是DOM中为操作HTML文档提供的属性和方法。文档中的标签称为元素（Element），文档中的所有内容称为节点（Node）
DOM HTML节点树：

DOM对象的继承关系：

通过上图的继承关系我们可以看出，document和Element是两种不同类型的节点（Node）对象。它们不仅能够使用Node对象的一系列属性和方法完成节点操作。也可以使用特有的属性和方法完成不同类型节点的操作。补充：jQuery对象是对DOM对象的一层包装，它为DOM对象提供了许多功能，使其对于页面元素和事件的调动更加方便。本文主要讲document对象。
可用代码来简单验证一下document的所属关系。

我们一般可用document的两种方法获取、增加，修改或删除网页内容。

一、利用DOMHTML元素操作。

方法 说明
document.getElementById() 返回对拥有指定id的第一个对象的引用
document.getElementsByName() 返回带有指定名称的对象集合
document.getElementsByTagName() 返回带有指定标签名的对象集合
document.getElementsByClassName() 返回带有指定类名的对象集合（不支持IE6~8）
利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。
document对象也提供一些属性，可用于获取文档中的元素，例如document.body返回文档的body元素，document.forms返回对文档中所有Form对象引用。若要对获取的元素内容进行操作，则可以利用DOM提供的属性和方法实现。innerHTML，innerText和textContent属性获取或修改元素内容：

分类 名称 说明
属性 innerHTML 设置或返回元素开始和结束标签之间的HTML
属性 innerText 设置或返回元素中去除所有标签的内容
属性 textContent 设置或者返回指定节点的文本内容
方法 document.write() 向文档写入指定的内容
方法 document.writeln() 向文档写入指定的内容后并换行
innerText属性在使用时可能会出现浏览器兼容的问题。因此，推荐在开发时尽可能的使用innerHTML获取或设置元素的文本内容。但是如是使用嵌入式的JavaScript方式使用nnerHTML获取或设置元素的文本内容时要注意JS代码要在你获取的元素的后面，否则会报错：Uncaught TypeError: Cannot set property ‘innerHTML’ of null（原因是执行了js代码段但没有找到目标id）
在DOM中，还提供了操作的属性和方法。attributes属性可得到一个元素的属性集合，setAttribute(name, value)方法设置或者改变指定属性的值。为了对类选择器列表进行操作，HTML5新增的classList（只读）元素的类选择器列表使得操作更加容易。toggle()
方法可以切换元素的样式，若元素之前没有指定名称的样式则添加，如果有则移除。

二、 DOM节点操作

由于HTML文档可以看做是一个节点树，因此，可以利用操作节点的方式操作HTML中的元素。但是DOM的节点操作没有修改这一操作，只有节点获取、删除和添加，获取节点的一些操作：
属性 说明
firstChild 访问当前节点的首个子节点
lastChild 访问当前节点的最后一个子节点
nodeName 访问当前节点名称
nodeValue 访问当前节点的值
nextSibiling 返回同一树层级中指定节点之后紧跟的节点
previousSibling 返回同一树层级中指定节点的前一个节点
parentNode 访问当前元素节点的父节点
childNodes 访问当前元素节点的所有子节点的集合
方法 说明
document.createElement() 创建元素节点
document.createTextNode() 创建文本节点
document.createAttribute() 创建属性节点
appendChild() 在指定元素的子节点列表的末尾添加一个节点
insertBefore() 为当前节点增加一个子节点（插入到指定子节点之前）
getAttributeNode() 返回指定名称的属性节点
setAttributeNode() 设置或者改变指定名称的属性节点
在获取元素的节点后，还可以利用DOM提供的方法实现节点的添加：
注意：其中create系列的方法是由document对象提供的，与Node对象无关。
节点删除：removeChild()和removeAttributeNode()方法实现。其返回值是被移出的元素节点或属性节点。