Node 分为 Document（html）、Element（元素）和 Text（文本），以及其他不重要的。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
</head>
<body>
</body>
</html>
image.png
把文档编程对象 即为DOM
image.png
页面中的节点通过Node提供的这些构造函数转换成对象，来进行操作
DOM API 对比
childNodes() 获取字节点
children()获取子元素
nodeName 只有svg是小写，其他都是大写
nodeType
1.element 元素节点 3.text 文本节点
document.nodeName
"#document"
document.documentElement.nodeName
"HTML"
DocumentFragment优化 面试常常遇到
nextSibling previousSibling寻找写一个节点
可能会找到 文本节点
innerText 和 textContent的区别
1.textContent 会获取所有元素的内容，包括<script>和<style>元素，然而innerText不会
还有就不一一具体举例了
能用那个用哪个
方法
cloneNode()
var dupNode = node.cloneNode(deep);
是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.
image.png
默认浅拷贝，只拷贝节点
deep=true
image.png
可以实现深拷贝，拷贝内部的节点
isSameNode() 同一个 等价于 ===
isEqualNode() 相等的
image.png
removeChild() 移除孩子元素，只是在页面中移除，依然保存在内存当中
normalize()
var wrapper = document.createElement("div");
wrapper.appendChild( document.createTextNode("Part 1 ") );
wrapper.appendChild( document.createTextNode("Part 2 ") );
// At this point, wrapper.childNodes.length === 2
// wrapper.childNodes[0].textContent === "Part 1 "
// wrapper.childNodes[1].textContent === "Part 2 "
wrapper.normalize();
// Now, wrapper.childNodes.length === 1
// wrapper.childNodes[0].textContent === "Part 1 Part 2 "
Node.normalize() 方法将当前节点和它的后代节点”规范化“（normalized）。在一个"规范化"后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点
注1：“空的文本节点”并不包括空白字符(空格，换行等)构成的文本节点。
注2：两个以上相邻文本节点的产生原因包括：
通过脚本调用有关的DOM接口进行了文本节点的插入和分割等。
HTML中超长的文本节点会被浏览器自动分割为多个相邻文本节点。
如何在div中添加文本节点
方法一：div.innerText='2222'
不过这种方法有危险，会重写div里面的内容
方法二：div.appendChild(document.createTextNode('hello'))
Document接口
Document 是HTML的父元素，HTML是根元素
Document.documentElement 就是HTML
document.referer 引荐者，访问一个网站一个图片，有的需要引荐者才能访问到文件，否则请求会被拒绝
document 加载分为三个步骤，open（），write() ,close()
这是同步执行的，如果此时有一个异步操作document.write() 会重新开启open状态，会把整个页面都冲掉，只有新写的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>
document.write('1')
document.write('2')
setTimeout(()=>{
document.write('3')
},2000)
</script>
</body>
</html>
delay.gif
document.execCommand('copy')
可以执行拷贝操作
像一些网站上的代码区域，你点击一下复制，就自动拷贝了，其实就是js执行了这么一句代码
querySelector() 抄袭的jQuery，选择器
返回一个伪数组
innertText 改写标签里的内容，仅能展示文本
innerHTML 既可以写入文本也可以写入标签
理论上都不应该使用这个方法，因为他可以将用户输入的标签写入到HTML中进行渲染
网友评论