课堂笔记
- DOM（document,object,model）的作用是通过构造函数将网页文档里的标签转化为对象，这个过程称为建立模型(Model)， DOM树根节点为
<html>对象，DOM的最小组成单位是节点（node） -
previousSibling()与nextSibling()可能获取到文本节点，为保证获取到想要的元素结点，必要时加入判断条件：.nodeType()方法，对应返回值：1 为元素节点 ； 3 为文本节点（回车属于文本节点） -
innerText()textContent()innerHTML() -
cloneNode()与cloneNode(deep) -
node1.isEqualNode(node2)与node1.isSameNode(node2)
动态集合与静态集合
var parent = document.getElementById('parent');
parent.childNodes.length // 2
parent.appendChild(document.createElement('div'));
parent.childNodes.length // 请问现在 length 是多少？ 3
var allDiv = document.querySelectorAll('div')
allDiv.length // 假设是 2
document.body.appendChild( document.createElement('div') )
allDiv.length // 请问现在 length 的值是多少？ 2
一部分教程将上面这两段代码的区别解释为：.querySelectorAll() 返回值是静态的伪数组，而 .childNodes() 返回动态数组。这种解释便于记忆但并不指向实质。
代码段2中，allDiv是.querySelector()返回的伪数组的引用，在被赋值之后，它的值没有发生任何变化。而代码段1并没有将parent.chilNodes赋值给任何变量，每次取它的长度，看起来就好像动态地实时更新一样。
将代码段2改成：
var allDiv = document.querySelectorAll('div')
allDiv.length // 假设是 2
document.body.appendChild( document.createElement('div') )
document.querySelectorAll('div').length // 3
效果就跟代码段1一样了
IIFE 与 let 的优越性
IIFE即函数立即调用的表达式。
为什么要有IIFE？
因为网页在生成时已经有一大堆全局变量，如果想用与全局变量同名的变量而不想覆盖全局变量，这时候就需要“函数立即调用”。
使用形式：
!function(){
函数体
return 局部变量
}()
可以看到匿名函数之后立即跟小括号表示调用
为什么要加感叹号？
若不加感叹号，这段代码会被浏览器当作函数声明语句，直接调用是不被允许的，加感叹号是在告诉浏览器将这段代码当作表达式来执行，同理也可以将！换成+，-，~等符号
既生var何生let?
let在ES6中被引入，同样用于声明变量，但只在let所在的局部作用域有效，这与var变量提升的性质截然不同，简便了局部变量的使用。
let同时为js引入了块级作用域，在此之前js只有函数作用域和全局作用域。
块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。
clientX/Y触发点视口距离
pageX/Y触发点文档（网页）距离
offsetX/Y触发点相对于被触发的DOM的距离
screenX/Y触发点相对于显示器左上角的距离
网友评论