DOM
DOM就是大家一起YY出来的页面的一种结构。由3个部分组成，Document,Object,Model。Document就是写代码的那些标签组成的，如下图：
Object就是把Document转换成对象得到的，关系如下图。Javascript类型中，它们都属于Node，Node又属于Object，关系如下下图：
Model就是上面这样模式的名字，文档对象模型。
Node
正如像function,Array一样，Node也有很多自己的方法和属性。Array的方法和属性用来对数组进行操作，Node的方法和属性就用来对节点进行操作。对节点进行操作意思就是在DOM这颗树上爬来爬去，寻找需要的元素（element）,文本（text）,文档（document）等，进行【删增改查】。
Node主要属性
父节点和子节点
- parentElement
- parentNode
childNodes
获得目标元素的所有子节点，这是对代码来讲的，所以也包括了写代码时的回车换行（text节点）children
获得目标元素的所有子标签firstChild
获得目标元素第一个子节点firstElementChild
获得目标元素第一个子标签lastChild
获得目标元素最后一个子节点lastElementChild
获得目标元素最后一个子标签
获取文本
innerText
修改节点的innerText，会删除节点里面的所有内容，改为修改的值要在后面添加文本内容，请这样写： var textnode=document.createTextNode("helloMyLove"); //创建文本节点 xxx.appendChild(textnode); //添加文本节点 或者联成一句： xxx.appendChild(document.createTextNode("helloMyLove");textContext
请参考： https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent 👆👆👆其中包括和 innerText 的区别👆👆👆- outerText
(whatever)
获取本身属性
nodeName
获得节点名称，注意除了 svg 外，名称都是大写nodeType
获得节点性质 返回值1、2、3、4、5......，从前内存紧张，存数字节省内存，对应的性质自己记。。。。。。nodeValue
(whatever)返回或设置节点值
兄弟节点
- nextSibling
- nextElementSibling
previousSibling
获得目标元素前一个节点previousElementSibling
获得目标元素前一个标签
其它
ownerDocument
(whatever)返回文档属于哪一个文档，适用于存在 iframe 的情况
Node主要方法
操作子节点
- appendChild()
removeChild()
将子元素移除页面，但子元素依然存在内存中replaceChild()
替换一个子元素，xxx.replaceChild(yyy); 被替换的元素 xxx 被安排到内存里去了
操作节点
cloneNode(true/false)
克隆一个节点 true 为深拷贝，拷贝节点和所有子孙节点，包括内容 false 为浅拷贝，仅拷贝节点本身，不拷贝内容- insertBefore()
normalize()
使节点规范化 由于某种原因，DOM中产生了相邻的两个文本节点或者空的文本节点，normalize规范化就是用来消除这种状况。 拼接两个相邻的文本节点或者删除空的文本节点或者其它方法。
判断节点
- contains()
hasChildNodes()
判断是否有子节点，返回 true/falseisEqualNode()
是否是同样的？isSameNode()
是否是同一个？👇👇👇例子👇👇👇
<body> <div class="red">hahaha</div> <div class="red">hahaha</div> </body>var div1=document.body.children[0]; //获取第一个div var div2=document.body.children[1]; //获取第二个div div1.isEqualNode(div2); //true div1.isSameNode(div2); //false
Document
Document常用属性
body
获取body元素characterSet
获取字符编码childElementCount
获取子元素个数- children
- doctype
documentElement
获取根元素，例如<html>domain
获取网页域名- head
- hidden
images
获取所有图片links
获取所有<a>标签location
获取网页地址详细信息
onxxxxxxxxx
各种事件 onclick、onscroll、onmouseover、onkeypress- origin
plugins
获取有没有开启插件readyState
是否还在加载referer
引荐者 就是网页是从哪里跳转来的，或者是直接进的网页，就没有引荐者 内部网址可能拒绝由外部网页跳转来的请求或者直接访问请求请参考：
https://developer.mozilla.org…
上下面是一个没有利益关系的百度首页的例子：
图片就是上上面这种样子。如上图，通过百度首页获取到的图片，其referer显示为https://www.baidu.com/index.p…。如下图，通过直接在地址栏中输入图片的地址来获取图片，它就没有referer这个请求了，因为是直接找到它的，不是通过别的网页才找到它的。这个例子中，百度允许通过图片路径直接访问这张图片，你也可以设置为无法直接获取，只能通过某些特定的网页才能看到这张图片，就是一定要有referer。
- scripts
scrollingElement
获取正在滚动的元素- styleSheets
- title
visibilityState
判断页面是否正在被浏览，可见状态
Document常用方法
close()/open()
关闭/打开文档编辑文档编辑声明周期
一般浏览器开始执行代码，文档编辑
open，然后写入write，最后代码结束，文档编辑close。这里只针对使用document.write()系列的文档写入方式。如下面动图，使用document.write()编辑文档会覆盖上一次文档open时写入的所有内容，所以，慎用。
- createDocumentFragment()
- createElement()
- createTextNode()
execCommand()
该方法可以用来操作文本，包括背景颜色、粗细、复制粘贴等 多用于设计 富文本 编辑器- exitFullscreen()
- getElementById()
- getElementsByClassName()
- getElementsByName()
- getElementsByTagName()
getSelection()
获取用户选中的文本hasFocus()
用户是否聚焦在页面上- querySelector()
- querySelectorAll()
- registerElement()
(whatever) write()
(whatever)document写入writeln()
(whatever)doucment在一行中写入
