目录
内容介绍一、DOM概念二、获取节点：1、document：htmlcollection① getElementById② getElementsByIdName③ getElementsByTagName④ document.querySelector()⑤ document.querySelectorAll();nodelist 2、 节点指针：① firstChild② lastChild③ childNodes④ previousSibling⑤ nextSibling⑥ parentNode 三、节点操作1、创建节点① createElement② createAttribute③ createTextNode 2、插入节点① appendChild② insertBefore 3、替换节点① replaceChild 4、复制节点① cloneNode 5、删除节点① removeChild 四、属性操作1、获取属性① getAttribute② setAttribute 五、文本操作六、节点1、类型2、节点树3、属性① node.nodeType:② node.nodeName③ node.nodeValue④ node.nodeContent 4、节点操作① 查找节点 七、其他1、innerHTML与innerText2、innerHTML与outHTML3、appendChild()与innerHTML的区别内容介绍
DOM是JavaScript操作页面的接口，全称“文档对象模型”（Document Object Model）。
一、DOM概念
文档：表示的时整个HTML网页文档 document；对象：表示将网页中的一个部分都转换为一个对象 object；模型：使用模型来表示对象之间的关系，这样方便获取对象 model；DOM是JavaScript操作页面的接口，全称“文档对象模型”（Document Object Model）
JS提供了一个比较大的对象，document，让咱们操作整个页面的DOM元素操作 => 增、删、改、查；
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 => 只读属性；bodydocument.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
更多演示案例，查看案例演示
欢迎评论留言!
