一篇文带你了解文档对象模型DOM（Document Object Model）

内容介绍

  DOM是JavaScript操作页面的接口，全称“文档对象模型”（Document Object Model）。

一、DOM概念

DOM是JavaScript操作页面的接口，全称“文档对象模型”（Document Object Model）
JS提供了一个比较大的对象，document，让咱们操作整个页面的DOM元素操作 => 增、删、改、查；

• 文档：表示的时整个HTML网页文档 document；
• 对象：表示将网页中的一个部分都转换为一个对象 object；
• 模型：使用模型来表示对象之间的关系，这样方便获取对象 model；

JS中通过DOM来对HTML文档进行操作 - 在DOM中最大的对象是document。

二、获取节点：

1、document：htmlcollection

① getElementById

语法：document.getElementById（元素ID）；
功能：通过元素ID获取节点；

② getElementsByIdName

语法：document.getElementsByName（元素name属性）；
功能：通过元素的那么属性获取节点；

③ getElementsByTagName

语法：document.getElementsByTagName（元素标签）；
功能：通过元素标签获取节点；

④ document.querySelector()

⑤ document.querySelectorAll();nodelist

2、 节点指针：

① firstChild

语法：父节点.firstChild；
功能：获取元素的首个子节点；

② lastChild

语法：父节点.lastChild；
功能：获取元素的最后一个子节点；

③ childNodes

语法：父节点.childNodes;
功能：获取元素的子节点列表；

④ previousSibling

语法：兄弟节点.previousSiblinig；
功能：获取已知节点的前一个节点；

⑤ nextSibling

语法：兄弟节点.nextSibling；
功能：获取已知节点的后一个节点；

⑥ parentNode

语法：子节点.parentNode；
功能：获取已知节点的父节点；

三、节点操作

1、创建节点

① createElement

语法：document.createElement（元素标签）；
功能：创建元素节点；

② createAttribute

语法：document.createAttribute（元素属性）；
功能：创建属性节点；

③ createTextNode

语法：document.createTextNode（文本内容）；
功能：创建文本节点；

2、插入节点

① appendChild

语法：appendChild（所添加的新节点）；
功能：向节点的子节点列表的末尾添加新的子节点；

② insertBefore

语法：insertBefore（所要添加的新节点，已知子节点）；
功能：在已知的子节点前插入一个新的子节点；

3、替换节点

① replaceChild

语法：replaceChild（要插入的新元素，将被替换的老元素）；
功能：将某个字节点替换为另一个；

4、复制节点

① cloneNode

语法：需要被复制的节点.cloneNode(true/false)；
功能：创建指定节点的副本；
参数：
  true：复制当前节点及其所有子节点；
  false：仅复制当前节点；

5、删除节点

① removeChild

语法：removeChild（要删除的节点）；
功能：删除指定的节点；

四、属性操作

1、获取属性

① getAttribute

语法：元素节点.getAttribute（元素属性名）；
功能：获取元素节点中指定属性的属性值；

② setAttribute

语法：元素节点.setAttribute（属性名，属性值）；
功能：创建或改变元素节点的属性；

五、文本操作

• insertData（offset，String）：从offset指定的位置插入string；
• appendData（string）：将string插入到文本节点的末尾处；
• deleteData（offset，count）：从offset起删除count个字符；
• replaceData（off,count,string）：从off将count个字符用string替代；
• splitData（offset）：从offset起将文本节点分成两个节点；
• substring（offset，count）：返回offset起的count个节点；

六、节点

  DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看做是文档树的一片叶子。

1、类型

• document：整个文档树的顶层节点；
• documentType：doctype标签；
• element：网页的各种HTML标签；
• attribute：网页元素的属性；
• text：标签之间或标签包含的文本；
• comment：注释；
• documentFragment：文档片段；

2、节点树

• 浏览器原生提供document节点，代表整个文档：document；
• 根节点：html：文档的第一层只有一个节点，就是HTML网页的第一个标签,其他HTML标签节点都是它的下级节点；

3、属性

① node.nodeType:

• 元素节点（element）:1；
• 文档节点（document）：9；
• 属性节点（attr）：2；
• 文本节点（text）：3；
• 文档片段节点（documentFragment）：11；
• 文档类型节点（documentType）：10；
• 注释节点（comment）：8；

② node.nodeName

• 文档节点（document）：#document；
• 元素节点（element）：大写的标签名；
• 属性节点（attr）：属性的名称；
• 文本节点（text）：#text；
• 文档片段节点（documentFragment）：#document-fragment；
• 文档类型节点（documentType）：文档的类型；
• 注释节点（comment）：#comment；

③ node.nodeValue

只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值；
属性返回一个字符串，表示当前节点和它的所有后代节点的文本内容；

④ node.nodeContent

textContent属性返回当前节点和它的所有后代节点的文本内容；

4、节点操作

① 查找节点

直接通过document对象进行查找：

• html：document.documentElement；
• url:document.url => 只读属性；
• body
• document.body => 获取整个的body对象；
• document.head => 文档信息头；
• document.title 文档标题 => 可读可写；
• script标签：document.script => HTMLCollection 类数组，有长度

七、其他

1、innerHTML与innerText

• innerHTML解析内容包含HTML标签；
• innerText只解析纯文本，不包含HTML标签；

2、innerHTML与outHTML

• outHTML包含对象标签本身；
• innerHTML只包含对象标签内的内容，不包含标签本身；

3、appendChild()与innerHTML的区别

• appendChild()只能传一个节点，且不直接传字符串（需appendChild（document.createTextElement(‘字符串’)）代替）；返回追加的Node节点（若appendChild（）的参数时页面中已存在的一个元素，则执行后原来的元素会被移除；）；
• innerHTML添加的为纯字符串，不能获取内部元素的属性；添加的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性；

性能：

• innerHTML比appendChild方便，特别是创建的节点属性多，同时还包含文本的时候；
• 执行速度上，appendChild比innerHTML快，特别是内容包括html标记时，appendChild快于innerHTML，innerHTML需要解析后执行，速度较慢；

---

标签：JavaScript，DOM

---

更多演示案例，查看 案例演示

---

欢迎评论留言!