課堂筆記
- DOM（document,object,model）的作用是通過構(gòu)造函數(shù)將網(wǎng)頁文檔里的標簽轉(zhuǎn)化為對象茬暇，這個過程稱為建立模型(Model)， DOM樹根節(jié)點為
<html>對象糙俗，DOM的最小組成單位是節(jié)點（node） -
previousSibling()與nextSibling()可能獲取到文本節(jié)點，為保證獲取到想要的元素結(jié)點巧骚，必要時加入判斷條件：.nodeType()方法，對應(yīng)返回值：1 為元素節(jié)點 劈彪； 3 為文本節(jié)點（回車屬于文本節(jié)點） -
innerText()textContent()innerHTML() -
cloneNode()與cloneNode(deep) -
node1.isEqualNode(node2)與node1.isSameNode(node2)
動態(tài)集合與靜態(tài)集合
var parent = document.getElementById('parent');
parent.childNodes.length // 2
parent.appendChild(document.createElement('div'));
parent.childNodes.length // 請問現(xiàn)在 length 是多少？ 3
var allDiv = document.querySelectorAll('div')
allDiv.length // 假設(shè)是 2
document.body.appendChild( document.createElement('div') )
allDiv.length // 請問現(xiàn)在 length 的值是多少草添？ 2
一部分教程將上面這兩段代碼的區(qū)別解釋為：.querySelectorAll() 返回值是靜態(tài)的偽數(shù)組，而 .childNodes() 返回動態(tài)數(shù)組远寸。這種解釋便于記憶但并不指向?qū)嵸|(zhì)。
代碼段2中驰后，allDiv是.querySelector()返回的偽數(shù)組的引用，在被賦值之后灶芝，它的值沒有發(fā)生任何變化。而代碼段1并沒有將parent.chilNodes賦值給任何變量夜涕，每次取它的長度，看起來就好像動態(tài)地實時更新一樣女器。
將代碼段2改成：
var allDiv = document.querySelectorAll('div')
allDiv.length // 假設(shè)是 2
document.body.appendChild( document.createElement('div') )
document.querySelectorAll('div').length // 3
效果就跟代碼段1一樣了
IIFE 與 let 的優(yōu)越性
IIFE即函數(shù)立即調(diào)用的表達式。
為什么要有IIFE涣澡？
因為網(wǎng)頁在生成時已經(jīng)有一大堆全局變量，如果想用與全局變量同名的變量而不想覆蓋全局變量入桂，這時候就需要“函數(shù)立即調(diào)用”。
使用形式：
!function(){
函數(shù)體
return 局部變量
}()
可以看到匿名函數(shù)之后立即跟小括號表示調(diào)用
為什么要加感嘆號抗愁？
若不加感嘆號，這段代碼會被瀏覽器當(dāng)作函數(shù)聲明語句驹愚，直接調(diào)用是不被允許的，加感嘆號是在告訴瀏覽器將這段代碼當(dāng)作表達式來執(zhí)行，同理也可以將谁鳍！換成+，-倘潜，~等符號
既生var何生let?
let在ES6中被引入，同樣用于聲明變量涮因，但只在let所在的局部作用域有效，這與var變量提升的性質(zhì)截然不同养泡，簡便了局部變量的使用奈应。
let同時為js引入了塊級作用域，在此之前js只有函數(shù)作用域和全局作用域购披。
塊級作用域的出現(xiàn)，實際上使得獲得廣泛應(yīng)用的立即執(zhí)行函數(shù)表達式（IIFE）不再必要了刚陡。
clientX/Y觸發(fā)點視口距離
pageX/Y觸發(fā)點文檔（網(wǎng)頁）距離
offsetX/Y觸發(fā)點相對于被觸發(fā)的DOM的距離
screenX/Y觸發(fā)點相對于顯示器左上角的距離
