7.10 dom常见操作方法

什么是 DOM？

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

    核心 DOM - 针对任何结构化文档的标准模型

    XML DOM - 针对 XML 文档的标准模型

    HTML DOM - 针对 HTML 文档的标准模型

注：DOM 是 Document Object Model（文档对象模型）的缩写。

HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

HTML DOM Tree 实例

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

目前最新的是DOM3, DOM4正在制定中~

节点的类型主要有六种:

  Document: 文档节点(整个文档window.docment)

  DocumentType: 文档类型节点

  Element: 元素节点  

  Attribue: 属性节点 

  Text: 文本节点 

元素类型 NodeType

元素    1    

属性    2    

文本    3    

注释    8    

文档    9    

获取页面节点的方法

getElementsByTagName(): 根据元素标签名称,返回HTML集合

getElementById(): 根据元素的id="dhl"属性,返回一个 例如 document.getElementById("dhl")

getElementByClassName(): 根据元素的class="dhl"属性 例如 document.getElementsByClassName("dhl") 支持派生

getElementByName(): 根据元素的name属性,大多用于表单元素或单选按钮

querySelector(): 根据CSS选择器获取匹配集合中第一个元素 （前端超爱之一）

querySelectorAll(): 根据CSS选择器获取匹配集合所有元素  （前端超爱之二）

节点遍历

childNodes: 所有子节点

firstChild: 第一个子节点

lastChild: 最后一个子节点

parentNode: 父节点,只能是元素/文档

nextSibling: 后一个兄弟节点

previousSibling: 前一个兄弟节点

一些常用的 DOM 对象方法

appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。insertBefore(a,b) 有2个参数a插入的元素 b插入的位置
createElement()	创建元素节点。
createAttribute()	创建属性节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。