一：本書說強調的原則
1.以使用者體驗為第一，如無必須，勿增實體：
一切的功能應該是為需求而產生的，過多的功能或不合時宜的展示都會分散注意力，都會影響使用者體驗。較好的標準是便捷，完整的滿足使用者需求是一個設計的基礎，在此之上增加的展示都需慎重，不能製造麻煩或讓人難以上手。
2.平穩退化與漸進增強：
JS和CSS都是對內容的修飾，既然是修飾就不能畫蛇添足，反而影響內容的顯示。內容是網站的核心，網站既然是一個獲取資訊的地方，在設計時就不能違反網站的本質。對資訊的準確完整呈現是首要任務，其它的都是對使用者體驗，操作的優化，視覺與操作都不允許損害內容。所以，當沒有JS與CSS時，內容也能完整呈現是必須首先做到的。寫程式碼時一定要想到，我的內容會不會受到它的影響，如果影響是否會對內容本身造成本質損害。
3.內容，表現，行為三者分離：
這是對第2點的進一步闡述，程式設計中一直追求著每一個模組的相互獨立，相互獨立意味著好維護，好修改，少影響。在DOM後面或許JS與CSS有相互滲透，但是表現與行為對內容的聯絡應該努力做到最低。例如把JS與CSS作為外部連結來引用，與JS有關的標籤利用DOM來單獨建立，,CSS與JS都儘量做到不去修改內容等，都是在程式時要考慮的。
4.向後，向前相容：
保證內容的正確完整顯示是基本，即使相容是個讓人痛苦的問題，但也不能因為瀏覽器版本的問題就放棄部分使用者，向後做到保證大部分瀏覽器能正常檢視網頁，向前做到程式碼按最高規範，留出擴充套件空間，防止因規範變化等原因對內容顯示造成影響。同時，不要做出過多假設，對即將使用的方法判斷是否在此瀏覽器中可用，即將使用的物件是否存在做出檢測是個好習慣。
5.效能考慮：
對DOM的元素查詢會歷遍整個文件樹，所以DOM的元素獲取應該保持重用，減少歷遍次數；將獲得的放入變數中；合併壓縮指令碼，使得下載時間減少；指令碼放在內容後邊，先保證內容的顯示；減少for語句的巢狀；使用圖片合併的方法，減少HTTP請求等，效能在於細節的關注。
二：書中關鍵概念
- 1. JS作為弱型別語言，意味著var相當於一個容器，把你要放的值都放進去。
- 2. 無var的變數是全域性變數，任意處對它的賦值都將改變它。有var的變數在函式結束後便銷燬，只能在本函式內使用。整個函式外部定義的var變數也相對於全域性變數了。
- 3. 文件樹包含元素，文字，屬性節點。所有帶node的屬性都會影響他們，如childNodes []時就要數好當前是文字還是元素節點。
- 4. 用 .style.property='' 是無法獲取或改變CSS中的屬性值的。
- 5. Ajax主要是用XMLhtttpRquest物件的方法來傳送和響應請求，在響應函式裡面當響應從伺服器端發回時，並且資訊載入完成後利用DOM動態建立元素來呈現發來的內容。
- 6. 動畫中，採用把setTimeout的返回值賦給全域性變數movement來取消動作函式,會導致即使暫停時movement仍有值，會繼續完成上次的動作。使用elem.movement=setTimout(),設定為變數屬性的方法，就能在下次改變時檢測movement的存在，取消上次的動作。
三：書中較為實用的部分程式碼
1.為某元素新增CSS屬性，通過為新增類名連線到CSS樣式的方法,注意兩類名間有空格：
function addClass(element,value) {
if(!element.className) {
element.className = value;
} else {
var newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
} 2.取消<a>的連結行為：
<a href="images.coffee.jpg" onclick="showPic("this"); return false;">Rose</a> 3.實現隔行換色：
function stripeTables() {
if(!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for(var i = 0; i < tables.length; i++) {
var odd = false;
var rows = tables.getElementsByTagName("tr");
for(var j = 0; j < rows.length; j++) {
if(odd == true) {
addClass(rows[j],"className");
odd = false;
} else {
odd = true;
}
}
}
} 3.頁面載入後實現多個函式：
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}4.將一個元素插入現有元素前面： function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}四：一些分散知識集合：常用DOM方法
- document.getElementById（id） 由id屬性值得到某個元素節點物件
- document.getElementsByTagName（tagname） 由節點/標籤名得到所有該節點物件的陣列
- object.getAttribute（attribute） 得到元素節點物件的屬性值
- object.setAttibute(attribute,value) 設定元素節點物件的屬性值
- node.parentNode 得到父節點
- node.nextSibling 得到下一個兄弟節點
- element.childNodes 得到一個陣列，包含給定元素節點的全體子元素。包括元素節點，屬性節點，和文字節點
- node.nodeType 元素節點返回1，屬性節點返回2，文字節點返回3
- node.nodeValue 檢索節點的值。
- node.firstChild 相當於node.childNodes [0] ，得到節點的第一個子節點
- node.lastChild node.lastChild 相當於node.childNodes [node.childNodes.length-1],節點的最後一個子節點
- document.write() 把字串插入到文件中
- object.innerHTML 用來讀寫某給定元素裡的HTML內容。不屬於W3C DOM標準組成部分。
- document.createElement(nodeName) 建立一個節點
- document.createTextNode(text) 建立一個文字節點
- parentNode.appendChild(child) 為一個元素節點新增子節點
其它方法：
- parseInt（） 獲取字串中的數字
- setTimeout（“function”，interval） 能夠讓某函式在經過一段預定時間（毫秒為單位）之後才開始執行
- clearTimeout（variable） 清除時間函式，variable儲存著某個setTimeout函式呼叫返回值的變數
評論(2)