DOM-API
DOM
DOM 的英文全称 (Document Object Model)。
DOM 国际标准，现在通用版本是DOM3。
DOM的最小组成单位叫做Node(节点)
DOM树的根节点是html
HTML是XML的一种衍生品<html>特殊的Element是由Document造的<head>,<body>是由Element造的<meta>,<title>，<h1>等是由Text造的
Element，Text，Document，Comment都是Node
注释也是一种节点 注释的__proto__是Comment.prototype
页面中的节点通过构造函数构造出对应的对象，这就是DOM的主要功能
回车也是textNode
node接口
节点的类型有七种：Document, DocumentType, Element, Attribute, Text, Comment, DocumentFragment
属性
- childNodes 所有的子节点包含textNode回车 会返回一个伪数组
<div id=parent1><div id=child1></div></div>parent1.childNodes 的值是{0:child1,length:1}的伪数组
ChildNode接口用于处理子节点（包含但不限于Element子节点）。Element节点、DocumentType节点和CharacterData接口，部署了ChildNode接口。凡是这三类节点（接口），都可以使用remove() before() after() replaceWith() - children 所有的子标签
- firstChild 第一个子节点
- lastChild 最后一个子节点
- firstElementChild 第一个元素子节点
- lastElementChild 最后元素子节点
- previousSibilng 上一个同级节点 （可能会获取文本节点）
- previousElementSibling 上一个同级元素节点
- nextSibilng 下一个同级节点 （可能会获取文本节点）
- nextElementSibling 下一个同级元素节点
innerText 里面的文本 有危险容易把子节点全部覆盖 与textContent的区别
1
2
3
4textContent 会获取所有元素的内容，包括script和style元素，然而 innerText 不会.
innerText意识到样式，并且不会返回隐藏元素的文本，而textContent会。
由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。
与 textContent 不同的是, 在 Internet Explorer (对于小于等于 IE11 的版本) 中对 innerText 进行修改， 不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。nodeName 节点的名称，只有svg是小写，其他都是大写的
- nodeType（1表示Element节点；3表示Text节点；8表示Comment节点;9表示Document节点；11:DocumentFragment优化）
- HTMLCollection与NodeList的区别有
- HTMLCollection实例对象的成员只能是Element节点，NodeList实例对象的成员可以包含其他节点
- B. HTMLCollection实例对象都是动态集合，节点的变化会实时反映在集合中。NodeList实例对象可以是静态集合。
- HTMLCollection实例对象可以用id属性或name属性引用节点元素，NodeList只能使用数字索引引用
方法
- cloneNode()
cloneNode(true)被克隆对象所有东西（包括子节点，后代节点）都被克隆，克隆出来的完全一样，又叫深克隆
cloneNode(false)||cloneNode()被克隆对象自己被克隆，又叫浅克隆 - isEqualNode() 节点是否相等 看起来一模一样
- isSameNode() 节点是否相同 === 就是同一个
- removeChild() 移除子节点，只是在页面中被移除，子节点还在内存里面
- replaceChild() 替换子节点
- normalize() 常规化
Document接口
属性
- characterSet 字符编码
- childElementCount 子元素的个数
- documentElement 会返回文档对象的根元素
- domain 获取域名
- hidden 文档是否隐藏
- images 获取所有img标签
- links 获取所有a标签
- location 获取当前的对象
- onxxxxx 事件监听
- plugins 用户是否开启flash插件
- readyState 文档是否加载完成
- referrer 引荐人 从一个页面里跳到另一个页面，那个页面就是referrer，可以通过referrer来拒绝为其他网站的引用者提供服务
- script 获取所有的script标签
- scrollingElement 真在滚动的元素
- visibilityState 文档是否正在显示
方法
- close() 关闭文档
- createTextNode 创建文本节点
- execCommand 执行命令 写一个副文本编辑器
- querySelector() 通过选择器返回一个元素
- querySelectorAll() 通过选择器返回所有元素的伪数组，即使只有一个元素，也会返回伪数组
Element接口
- attributes() 返回属性
- className() class
- innerHTML 与innerText,innerText会把标签当成文本 innerHTML会把标签执行
除了document，Element也是可以querySelector
<div id=parent></div>如果有父窗口，就是父窗口，如果没有，就是当前窗口
- window的属性全局变量不能用，容易把window的属性覆盖
- 可以使用局部变量，在函数作用域里使用
- 如果我们只是想使用局部变量，声明一个匿名函数然后在后面加.call(),又叫立即执行函数
- 如果直接运行立即执行函数，浏览器会报错语法错误，解决方法
- 用()把整个立即执行函数包起来
- 用()把立即执行函数的函数用()包起来
- 在立即执行函数前加个-，告诉浏览器后面声明并且调用这个值，不是函数声明
- 在立即执行函数前加个+，告诉浏览器后面声明并且调用这个值，不是函数声明
- 在立即执行函数前加个!，告诉浏览器后面声明并且调用这个值，不是函数声明
- 在立即执行函数前加个~，告诉浏览器后面声明并且调用这个值，不是函数声明
Comments