DOM API

2018-05-31 本文已影响0人 Ga611

课堂笔记

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触发点相对于显示器左上角的距离