Javascript DOM編程藝術

標籤：

Chapter 0

為什麼讀這本書？作為js入門書，補基礎,由於本書代碼demo較簡單，並沒有貼代碼，只記錄一些自己要注意的知識點以及代碼指令碼

Chapter 1: javascript簡史 

DOM全稱是document object model(文件物件模型),假設把文檔看做一個對象,那DOM就是如何利用HTML和XML去對這個對象進行操作和控制的標準

　　1.2 AJAX(非同步傳輸技術)引發了一次學習DOM指令碼編程的熱潮:　　

　　傳統的Web應用互動由使用者出發一個HTTP請求到伺服器，伺服器對其進行處理返回一個新的HTML到用戶端，然後每當服務處理請求時，用戶端只能等待，而使用AJAX的非同步處理機制，就可以在不更新整個頁面的前提下維護資料，這一特點主要基於XMLHTTP和XMLHTTPRequest

　　1.3 HTML5新特性:

　  <audio>和<video>控制媒體
　　<canvas>具備了完善的繪圖能力
　　瀏覽器本機存放區超越了cookie的限制：
　　cookie: 4kb,每次請求一個新的頁面都需要發送過去，不可以跨域調用
　　localstorage: 始終有效, 儲存大小為5mb

Chapter 2: Javascript文法

　　2.1 資料類型

Javascript是一種弱類型語言,程式員可以在任何階段改變變數的資料類型
var age = ‘china‘;
age = 26;
如果想在變數中使用單引號或雙引號,必須使用\對字串進行轉義
var mood = ‘don\‘t ask‘;  // don‘t ask

　　2.2 數組

數組的定義:
var arrs = Array();
var arrs = Array(4);

關聯陣列:
var arrs = Array();
arrs[‘name‘] = ‘Carlton‘;
arrs[‘age‘] = ‘26‘;
arrs[‘living‘] = true;

　　2.3 對象

2.3.1 對象是什麼:由一些屬性和方法組成的的無序集合,當此特性為函數時,我們稱之為對象的方法(method), 不是函數時,則稱之為對象的屬性(proporty)

var obj1 = Object();

obj.name = ‘Carlton‘;

obj.age = ‘26‘;

obj.living = function(){

　　alert(true);

}

var obj2 = {
　　name: "Carlton",
　　age: "26",
　　living: function(){
　　　　alert(true);
　　}
}

 

　　2.3.2 對象有哪些:

　　內建對象:Array,Date,Math等　　

　　宿主對象:Form,Image(可訪問img標籤), Element,document

 

Chapter 3: DOM

　　3.1 DOM概述

DOM拆開來看就是Document(文檔)、Object(對象)、Model(模型)
對於HTML來說，DOM中document就是HTML文檔, Object是供JS操作DOM的一些對象, Model是對HTML文檔建立的一種模型,以tree的形式呈現
HTML文檔就相當於一顆樹，由不同的節點構成，關於節點：
整個文檔就是一個文檔節點
每個HTML標籤就是一個元素節點
包含在HTML元素中的文本是文本節點
每一個HTML 屬性是一個屬性節點
注釋屬於注釋節點

　　3.2 擷取元素

document.getElementById(id);//擷取特定id的某個節點
document.getElementByTagName(tagName);//擷取特定標籤的節點集合
document.getElementsByClassName(classname);//擷取特定類名的節點集合
擷取和設定屬性:
object.getAttribute(attr);//擷取屬性attr的值，object是一個節點
object.setAttribute(attr, value);//為屬性attr設定相應值

Chapter 4: Javascript圖片庫

本章代碼demo比較簡單，在這裡就不詳細介紹，我只列了一些自己需要注意的點

Q:在點擊某個連結時，留在這個網頁而不是轉到另一個視窗
A:通過增加一個“預留位置”圖片的方法在這個首頁為圖片預留一個瀏覽地區
Q:點選連結時，在當前網頁上看到圖片
A:使用return false取消網頁預設行為
<a href="#" onclick="showPic(this);return false"></a>
另一個預設動作是form表單中的<input type="submit">

ChildNodes屬性可以擷取任何一個元素的所有子項目

document.getElementByTagName("body")[0].ChildNodes;//擷取body所有的子項目

nodeType可以讓我們知道自己正在與哪一種節點打交道

元素節點、屬性節點、文本節點的nodeType分別為1,2,3

node.nodeValue可以改變一個文本節點的值

node.firstChild 等價於 node.ChildNodes[0]

node.lastChild 等價於 node.ChildNodes[node.ChildNodes.length - 1]

 

 

Chapter 5: 最佳實務


Chapter 6: 圖片庫改進版

　　6.1 結構化程式設計

其中一個原則是:函數應該只有一個出口和入口 
如果一個函數有多個出口，應該將出口集中在開頭部分，就可以接受了，例:
function prepareGallery(){
　　if(!document.getElementByTagName) return false;
　　if(!document.getElementById) return false;
　　if(!document.getElementByClassName) return false;
}

　　6.2 共用onload事件

addLoadEvent函數將完成的操作：
把現有的window.onload事件處理函數的值存入變數oldload
如果在這個處理函數上沒有綁定任何函數，就像平時那樣把心得函數添加給它
如果在這個處理函數上已經綁定了一些函數，就把新函數追加到現有的指令的末尾
function addLoadEvent(func){
　　var oldonload = window.onload;
　　if(typedef window.onload != ‘function‘){
　　　　window.onload = func;
　　} else {
　　　　window.onload = function(){
　　　　　　oldonload();
　　　　　　func();
　　　　}
　　}
}

這就將那些在頁面載入完畢時執行的函數建立為一個隊列,如
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

　　6.3 使用三元操作符

若函數格式如下所示
if(whichpic.getAttribute("title")){
var text = whicpic.getAttribute("title");
} else {
var text = "";
}
則可以用三元操作符完成操作
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";

Chapter 7: 動態建立標記

　　7.1 document.write 和 innerHTML

document對象的write方法可以方便的將字串插入文檔中
document.write("<p>This is a test</p>")
innerHTML 屬性: 用來讀或寫指定元素內的HTML內容
<div id="testDiv">
<p>This is a test</p>
</div>
此時testDiv.innerHTML中的內容是<p>This is a test</p>

 

　　7.2 DOM方法

　　7.2.1 createElement方法

動態建立script引用

var head= document.getElementsByTagName(‘head‘)[0];   

var script= document.createElement(‘script‘);   

script.type= ‘text/javascript‘ / script.setAttribute("type", "text/javascript");   

script.src= ‘call.js‘ / script.setAttribute("src", "call.js");   

head.appendChild(script);

 

 

　　7.2.2 createTextNode方法

var para = document.createElement("p");

document.getElementById("testDiv").appChilid(para);

var txt = document.createTextNode("Hello World");

para.appendChild(txt);

 

　　7.2.3 insertBefore方法

parentElement.insertBefore(newElement, targetElement)

newElement: 你想插入的元素

targetElement: 你想將newElement插入哪個元素之前

parentElement: targetElement元素的父元素,即targetElement.parentNode

 

　　

　　7.2.4 自訂insertAfter方法

function inertAfter(newElement, targetElement){　　var parent = targetElement.parentNode;　　if(parent.lastChild == targetElement){　　　　parent.appendChild(newElement);　　} else {　　　　parent.insertBefore(newElement, targetElement.nextSibling);//目標元素的下一個兄弟元素　　}}

　　

　　7.3 AJAX

　　以前想要看到一個頁面的變化，哪怕是很小的一部分，也要重新發送請求，重新整理整個頁面，而使用Ajax就可以只更新頁面中的一小部分，其中的內容都不需要再更新，已經載入的頁面只有一小部分會更新，而不必再次載入整個頁面

Ajax最的的優勢是對頁面的請求以非同步形式發送給伺服器，這樣不需要等伺服器返回請求資料也可以繼續瀏覽網頁，不極大的提升了使用者體驗

 

 

　　7.3.1 XMLHttpRequest

var request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //ie瀏覽器建立對象
var request = new XMLHttpRequest();//其他瀏覽器建立對象
//範例程式碼
function getNewContent() {
　　var request = XMLHttpRequest();
　　if(request){
　　　　request.open("GET", "example.txt", true);
　　　　request.onreadystatechange = function(){
　　　　//XMLHttpRequest對象送迴響應的時候執行
　　　　if(request.readstate == 4) { //4表示請求完成
　　　　　　//一些操作
　　　　}
　　};
　　request.send(null);
　　} else {
　　　　alert("fail");
　　}
}

Chapter 8: 充實文檔的內容

　　8.1 DOCTYPE

在HTML5出現之前，我們一般使用XHTML文檔規則,而不是用HTML,因為HTML有很多不方便的地方
HTML規則即允許使用小寫(<a>)也允許使用大寫字母(<A>),也可以省略結束標籤(</p>,</li>)
使用XHTML規則
<!DOCTYPE html PUBLIC ".." "https://..">
使用HTML5規則
<!DOCTYPE html> 同樣支援HTML和XHTML規則

Javascript DOM編程藝術