第3章 DOM
- 即使在整個文檔裏這個標籤只有一個元素，getElementsByTagName也返回一個數組。此時的數組長度是1。
- HTML5 DOM 新增 getElementsByClassName
- 在使用類名獲取標籤匹配時，如果有多個類名，類名順序和帶有更多類名都可以匹配。
- 檢查某項數據是否是null時，我們其實是在檢查它是否存在。
- 通過setAttribute對文檔做出修改後，在通過瀏覽器查看源代碼看到的仍是改變前的屬性值，也就是說，setAttribute做出的修改不會反映在文檔本身的源代碼裏。這中表裏不一的現象來自DOM的工作模式：先加載文檔的靜態內容，再動態刷新，動態刷新不影響文檔的靜態內容。對頁面內容進行刷新卻不需要再瀏覽器裏刷新頁面。
- setAttribute實際完成兩項操作：創建屬性，設置值。
if(something) == if(something != null)第4章 事件處理函數
事件處理函數的作用是，在特定事件發生時調用特定的JavaScript代碼。
事件處理函數的工作機制是，在給某個元素添加了事件處理函數後，一旦事件發生，相應的JavaScript代碼就會得到執行。被調用的JavaScript代碼可以返回一個值，這個值會被傳遞給那個事件處理函數。例如：我們可以給某個鏈接添加一個onclick事件處理函數，並讓這個處理函數所觸發的JavaScript代碼返回布爾值true或false。這樣一來，當這個鏈接被點擊時，如果那段JavaScript代碼返回的值是true，onclick事件處理函數就認爲“這個鏈接被點擊了”；反之，如果返回的值是false，onclick事件處理函數就認爲“這個鏈接沒有被點擊”。
第5章 最佳實踐
一首老歌中這樣寫道：不在於你做什麼，只在於你怎麼做。
1.平穩退化
有的用戶在使用瀏覽器時可能禁止了JavaScript腳本（例如使用插件避開廣告）。
如果正確的使用了JavaScript腳本，就可以讓訪問者在他們禁止JavaScript的情況下仍能順利的瀏覽網頁。這就是平穩退化。
雖然某些功能無法使用，但最基本的操作仍能進行。
2.漸進增強
所謂“漸進漸強”就是就是用一些額外的信息層去包裹原始數據。
在給HTML內容加上各種標記後，就可以使用各種CSS指令控制內容的顯示效果。CSS指令構成一個表示層。這個標識層就像是一張透明的彩色薄膜，可以包裹到文檔的結構上，使其內容產生各種色彩。
3.分離JavaScript
考慮外部引入的JavaScript腳本內代碼聲明邏輯與HTML文檔標籤順序邏輯在程序執行時的先後順序。因爲腳本加載時文檔可能不完整，所以模型也不完整。沒有完整的DOM，DOM方法就不無法正常工作。
<head>
<script src=""></script>
</head>
<body>
<a href=""></a>
</body>先加載腳本，後續標籤還未讀取。DOM不完整。
<head>
</head>
<body>
<a href=""></a>
<script src=""></script>
</body>當引入多個JS腳本，瀏覽器可能會一次加載多個，不能保證哪個文件最先結束加載。
如果讓目標代碼在HTML文檔加載到瀏覽器之後馬上開始執行：
HTML文檔全部加載完畢時會觸發onload事件。
window.onload = function;4.向後兼容
對象檢測：檢測瀏覽器對JavaScript的支持程度。這有點像遊樂園裏的警告牌：“你必須到達這一身高才能參與這項活動”。換句話說需要在DOM腳本里表達出下面的含義：“你必須理解這麼多的JavaScript語言才能執行這些語句”。
if(method){
statements
}如果你理解這個方法，請進來坐坐，給你拿拖鞋，我給你倒咖啡，我們聊聊人生……
if(!method){
statements
return false;
}如果你不理解這個方法，請離開。
if(!document.getElementsByTagName || document.getElementById) return false;如果你不理解getElementById和getElementsByTagName，你就不能參加這項遊樂活動。
5.性能考慮
- 儘量少訪問DOM和減少標記
不管什麼時候，只要是查詢DOM中的某些元素，瀏覽器都會搜索整個DOM樹，從中查找可能匹配的元素。
好的做法是將第一次搜索的結果存到變量裏。
- 引入外部腳本，儘量合併腳本
- 壓縮腳本代碼
第6章 案例：圖片庫改進
網頁的行爲層（JavaScript）是作用於其結構層（HTML）之上的。
文檔的結構內容與文檔點的行爲分離非常重要：如果想用JavaScript給某個網頁添加一些行爲，就不應該讓JavaScript代碼對這個網頁的結構有任何依賴。
作者的思路很清晰，編程前列出所有需求與功能，然後逐一實現。
- 改變事件處理函數默認行爲
return false;
翻譯成人類語言：按照這個鏈接沒被點擊的情況採取行動。
規章制度下的人情世故DOM Core 和 HTML DOM
- getElementById
- getElementsByTagName
- getAttribute
- setAttribute
這些方法都是 DOM Core 的組成部分。它們並不專屬於JavaScript，支持DOM的任何一種設計語言都可以使用它們。
屬性onclick屬於HTML-DOM，它們出現在DOM Core之前。
document.getElementByTagName("form")
document.forms // HTML-DOM提供了forms對象element.getAttribute("src")
element.srca.setAttribute("src",source)
a.src = source第7章 動態創建標記
innerHTML 屬性
用DOM的眼睛來看一段結構：
從innerHTML的角度來看：
div標籤裏有面只有一個 HTML字符串
值是:
<p>This is<em>my</em>content.</p>innerHTML屬性無細節可言。想要獲得細節，就必須使用DOM方法和屬性。標準化的DOM像手術刀一樣精細，innerHTML屬性就像大錘一樣粗放。
標準的DOM可以替代innerHTML，同時提供了更高的精確性和更強大的功能。
DOM方法
DOM是文檔的表示。DOM所包含的信息與文檔裏的信息一一對應。
（文檔是玩家，DOM是你遊戲裏創建的1:1仿真角色，瀏覽器是遊戲）
DOM是一條雙車道。不僅可以獲取文檔的內容，還可以更新文檔的內容。改變了DOM樹，文檔在瀏覽器裏的呈現效果就會發生變化。setAttribute方法並不改變文檔的物理內容，如果用編輯器而不是瀏覽器去打開這個文檔，我們將看不到任何變化。只有在用瀏覽器打開文檔時才能看到文檔呈現效果的變化。
這是因爲瀏覽器實際顯示的是那顆DOM節點樹。在瀏覽器看來，DOM節點樹纔是文檔。動態方式創建標記實際上並不是在創建標記，而是在改變DOM節點樹。從DOM的角度思考問題。
在DOM看來，一個文檔就是一顆節點樹。如果你想要在節點樹上添加內容，就必須插入新的節點。
- createElement 方法：創建一個元素節點
createElement(nodeName)將新創建的元素賦給一個變量是個好主意：
var newElementP = document.createElement("p");變量現在包含着一個指向剛創建出來的那個p元素的引用。
雖然現在這個新創建的p元素已經存在了，但它還不是任何一顆DOM節點樹的組成部分，它只是遊蕩在JavaScript世界裏的一個孤兒。這種情況稱爲 文檔碎片（document fragment）。
- appendChild 方法：將新創建的節點插入節點樹
parent.appendChild(child)現在可以將孤兒放到屬於他的家了。
- createTextNode 方法：創建一個文本節點
document.createTextNode(text)創建元素節點，插入元素節點之後，我想要寫一條文本節點，就要用到這個方法。
- insertBefore 方法：把一個新元素插入到一個現有元素的前面
parentElement.insertBefore(newElement,targetElement)
newElement:想插入的元素
targetElement:想插在那個元素之前
parentElement:目標元素的父元素