DOM——document，object，model，把文档(标签)变成对象的模型
DOM标准：DOM 有自己的国际标准，目前的通用版本是DOM 3
页面中的节点通过ETDC等构造函数构造出对应的对象。
image.png
标签都是Element对象，<html></html>是特殊的Element对象，由Document造出，其他的标签由Element方法造出。
注释由Comment构造函数构造。
页面中的文本节点都由Text造出。
E,D,T的祖先是Node。
Node派生自object
image.png
Node的接口
1.属性
回车会充当一个#text节点
.childNodes获取所有子节点，包括text。
-文档节点（document）就有两个子节点：文档类型节点（docType）和 HTML 根元素节点。
-如果当前节点不包括任何子节点，则返回一个空的NodeList集合。由于NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中。
.children获取所有子标签
.previousSibling/nextSibling获取上/下一个兄弟节点
.previousElementSibling/nextElementSibling获取上/下一个兄弟元素
.nodeName获取的标签名除了svg其他都是大写
.document.documentElement.nodeName //HTML
.nodeType的值
1 Node.ELEMENT_NODE //tag，element标签元素
3 Node.TEXT_NODE //文本#text
8 Node.COMMENT_NODE //注释
9 Node.DOCUMENT_NODE //Document节点
10 Node.DOCUMENT_TYPE_NODE //描述文档类型的documenttype节点
11 Node.DOCUMENT_FRAGMENT_NODE //一个document fragment节点🌟🌟使用document fragment优化性能
innerText 和textContent都是用来获取当前节点和它的所有后代节点的文本内容，区别：
image.png
innerText性能低，平时用之前可以先检测一下：
image.png
.nodeValue //返回一个字符串，表示当前节点本身的文本值。
对于文本节点和注释节点，textContent和nodeValue的值相同。
对于其他类型的节点，textContent会将每隔子节点的内容连接在一起返回，不包括注释节点。
文档节点和文档类型节点的textContent==null
.ownerDocument 返回当前节点所在的顶层文档对象，即document对象。
.parentNode 返回当前节点的父节点。只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）。
2.方法（函数属性）
appendChild() //如果appendChild方法的参数是DocumentFragment节点，那么插入的是DocumentFragment的所有子节点，而不是DocumentFragment节点本身。返回值是一个空的DocumentFragment节点。
.insertBefore() //同上。另外insertBefore的第二个参数不能省略。可以是null。则插到最后。
.cloneNode(true) //true深拷贝（包括它的内容），不写则为false浅拷贝
-克隆一个节点之后，DOM 有可能出现两个有相同id属性（即id="xxx"）的网页元素，这时应该修改其中一个元素的id属性。如果原节点有name属性，可能也需要修改。
-克隆一个节点，会拷贝该节点的所有属性，但是会丧失addEventListener方法和on-属性（即node.onclick = fn），添加在这个节点上的事件回调函数。
-须使用诸如Node.appendChild这样的方法将克隆的节点添加到文档之中。
.contains()
image.png
.hasChildNodes()
.insertBefore()
.isEqualNode() //方法返回一个布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。
.isSameNode() // ===，方法返回一个布尔值，表示两个节点是否为同一个节点。
.removeChild() //从页面移除，但还存在内存中
.replaceChild() //被替换掉的也还在内存中
.normalize //方法用于清理当前节点内部的所有文本节点（text）。它会去除空的文本节点，并且将毗邻的文本节点合并成一个，也就是说不存在空的文本节点，以及毗邻的文本节点。
image.png
重要知识点：
1.nextSibling
2.textContent和innerText的区别 面试
3.nodeType 1，3 面试
4.cloneNode
5.isEqualNode和iSameNode
6.normalize()
NodeList接口和HTMLCollection接口
节点都是单个对象，有时需要一种数据结构，能够容纳多个节点。DOM 提供两种节点集合，用于容纳多个节点：NodeList和HTMLCollection。
NodeList
1.通过以下方法可以得到NodeList实例。(伪数组)
Node.childNodes。document.querySelectorAll()、document.getElementsByTagName()等节点搜索方法。
2.目前，只有Node.childNodes返回的是一个动态集合，其他的 NodeList 都是静态集合。
HTMLCollection
1.HTMLCollection是一个节点对象的集合，只能包含元素节点（element），不能包含其他类型的节点。它的返回值是一个类似数组的对象，但是与NodeList接口不同，HTMLCollection没有forEach方法，只能使用for循环遍历。
2.实例都是动态集合。
Document接口
属性
anchors 获取页面中的所有a标签，为了兼容，该属性只返回拥有name属性的a元素。
body 获取body元素
characterCount “UTF-8”
childElementCount 只读属性返回一个无符号长整型数，表示给定元素的子元素数
document.children //html
documentElement //文档对象的返回根元素 html
domin //获取域名
head 获取head元素
hidden 获取文档是否被隐藏
links 获取所有a标签
location 获取响应信息
onxxxxx 事件监听
origin 源
plugins 插件
readyState 加载状态
referrer 引荐者，前页面，可以用来设置访问权限
scrollingElement 正在滚动的元素
visibilityState 是否被显示
方法
close() 关闭当前文档的数据写入
image.png
运行结果是先12，1秒后只有3
document执行过程：
open -> write -> close
close后执行settimeout中的，close后相当于刷新过，会冲掉之前的内容。少用write。
createDocumentFragment()
createElement()
createTextNode()
execCommand() 需要自己写一个副文本编辑器时
image.png
exitFullscreen() 退出全屏
getSelection() 获取用户选中的文本
hasFocus() 是否focus
querySelector() //常用，只返回第一个
querySelectorAll() //常用，返回所有元素组成的数组(伪数组)，proto:NodeList
write()
writeln()
registerElement()
Element的接口
attributes 获取其所有属性
classlist
classname
clientHeight
clientWidth
clientTop
clientLeft
id
innerHTML 和innerText的区别是，会响应标签。不要用。
tagName
方法
querySelector()
querySelectorAll()
removeAttribute()
setAttribute()
...
ChildNode接口
replaceWith方法使用参数节点，替换当前节点。参数可以是元素节点，也可以是文本节点。
一些题目
image.png
<div id=x></div>，x 的值是：就是这个 id 为 x 的 div 对应的 Element 对象
<div id=parent></div>，parent 的值为： 如果有父窗口，就是父窗口。如果没有，就是当前窗口
image.png
image.png
网友评论