DOM

DOM

• 概念： Document Object Model 文档对象模型

  • 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

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

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

    • Document：文档对象

    • Element：元素对象

    • Attribute：属性对象

    • Text：文本对象

    • Comment:注释对象

    • Node：节点对象，其他5个的父对象

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

节点

* Document：文档对象

* Element：元素对象

* Attribute：属性对象

* Text：文本对象

* Comment:注释对象

* Node：节点对象，其他5个的父对象

创建

创建文档对象 Document

• window.document
• document

创建节点

• createElement() 创建⼀个新的节点，需要传⼊节点的标签名称，返回创建的元素对象
• createTextNode() 创建⼀个⽂本节点，可以传⼊⽂本内容
• innerHTML 也能达到创建节点的效果，直接添加到指定位置了
• createAttribute(name)
• createComment()

获取

获取Element对象

• getElementById() 根据id获取dom对象，如果id重复，那么以第⼀个为准
• getElementsByTagName() 根据标签名获取dom对象数组
• getElementsByClassName() 根据样式名获取dom对象数组
• getElementsByName() 根据name属性值获取dom对象数组，常⽤于多选获取值

插入

appendChild() 向元素中添加新的⼦节点，作为最后⼀个⼦节点

write() 将任意的字符串插⼊到⽂档中

insertBefore() 向指定的已有的节点之前插⼊新的节点newItem：要插⼊的节点 exsitingItem：参考节点 需要参考⽗节点

间接查找节点

childNodes 返回元素的⼀个⼦节点的数组

firstChild 返回元素的第⼀个⼦节点

lastChild 返回元素的最后⼀个⼦节点

nextSibling 返回元素的下⼀个兄弟节点

parentNode 返回元素的⽗节点

previousSibling 返回元素的上⼀个兄弟节点

删除节点

removeChild() 从元素中移除⼦节点

XMind - Trial Version