《JavaScript DOM編程藝術》學習筆記(一)


這本書是我聽說學習前端基礎入門書籍,於是就開始看了,大概是從5月10號開始看的吧,一直看到現在,差不多要看完了,書是挺厚的。。。286頁,不過比起JAVASCRIPT權威指南來說還是差多了,權威指南才看沒多少,加油吧。

本來一直是把筆記抄在我的筆記本上的,但經常忘記帶身邊,想看時沒法看,就決定記在博客上,也方便閱讀~

小巧的筆記本,嘿嘿,就這樣抄了差不多20頁了,聽說一個合格的程序猿都是會手寫代碼的,所以我也抄了點,就抄了不少代碼。。博客里就少上點代碼吧。

 

1、用一個method方法去定義新方法:

Function.prototype.method = function(name,func){
    this.prototype[name] = func;
    return this;  
}

2、檢查某項數據是否是null值,即檢查它是否存在:

if(something) 與 if(something!=null) 完全等價。

3、把傳遞給函數的數據稱為參數(argument)。

4、typeof可以告訴我們它的操作數是一個對象、數值、布爾值、字符串或是一個函數。

5、數組也可以創建成對象:

var lennon = Object();
lennon.name = "小李";
lennon.year = 1940;
lennon.living = false;

創建對象花括號法:

var lennon = {name:"小李", year:194, living:false};

6、如果需要訪問childNodes數組的第一個元素,就可以寫成firstChild:

node.firstChild 完全等價於 node.childNodes[0]。

7、

var txt = whichpic.getAttribute("title");
//當圖片庫頁面上的某個圖片連接被點擊,鏈接的title屬性值將保存到txt變量中
var description = document.getElementById("description");
//得到id為"description"的<p>元素,並保存至變量description
description.firstChild.nodeValue = txt;
//把description對象的第一個子節點的nodeValue屬性值設為變量txt的值

8、為JavaScript代碼預留出退路:在鏈接里把href屬性設為URL地址。this可以用來代表任何一種當前元素,所以可以用 this 和 getAttribute() 方法來提取href屬性的值:

<a href="http://www.cnblogs.com/undezhi" onclick="popUp(this.getAttribute('href');return false)">Example</a>

用DOM提供的this.href屬性:

<a href="http://www.cnblogs.com/undezhi" onclick="popUp(this.href;return false;)">Example</a>

9、因為腳本加載時文檔可能不完整,所以模型也不完整。沒有完整的DOM,getElementsByTagName等方法就不能正常工作。

必須讓代碼在HTML文檔全部加載到瀏覽器之后馬上開始執行。HTML文檔全部加載完畢時將發出一個時間,這個時間有它自己的時間處理函數。

文檔將被加載到一個瀏覽器窗口里,document對象又是windows對象的一個屬性。當windows對象出發onload事件時,document對象已存在。

把JS代碼打包在prepareLink函數里,並把這個函數添加到windows對象的onload事件上去,這樣DOM就可以正常工作:

windows.onload = prepareLinks;
function prepareLinks() {
    var (links = document.getElementsByTagName("a"));
    for(var i = 0; i < links.length; i++) {
        if(links[i].getAttribute("class") == "popUp") {
            links[i].onclick = function() {
            popUp(this.getAttribute("href"));
            return false;}
        }
    }
}

popUp函數:

function popUp(winURL) {
    window.open(winURL,"popUp","wdith=320";)}

10、

gallery.getElementsByTagName("a");
//上面和下面等價
document.getElementById("imagegallery").getElementsByTagName("a");

11、若把placeholder圖片從標記文檔里刪掉並在瀏覽器里刷新,就會發現無論點擊清單里的哪一個鏈接都沒有任何響應。

為驗證此問題,應該在返回前驗證showPic的返回值,以便決定是否阻止默認行為。如果showPic返回true,那么更新placeholder。

links[i].onclick = function() {
    return !showPic(this);
}

現在,如果showPic返回true,我們返回false,瀏覽器就不會打開鏈接。

如果showPic返回false,那么任務圖片沒有更新,於是返回true以允許默認行為發生。

12、在showPic函數里仍存在一些需要處理的假設。

比如,假設每個鏈接都有一個title屬性:

var txt = whichpic.getAttribute("title");

作為一種簡單的視覺反饋,在title屬性不存在時把變量txt的值設為空字符串:

if(whichpic.getAttribute("title") {
    var txt = whichpic.getAttribute("title");
} else {
    var txt = "";
}

同樣操作的另一種辦法:

var txt = which.getAttribute("title")?which.getAttribute("title"):"";

檢查placeholder元素是否存在,但須假設那是一張圖片。為了驗證,用nodeName屬性來測試:

if(placeholder.nodeName!="IMG") return false;

13、讓onkeypress事件與onclick事件出發同樣行為,可以簡單地把有關指令復制一份:

links[i].onclick = function() {
    return showPic(this)? false: true;
}
links[i].onkeypress function() {
    return showPic(this)? false: true;
}

更簡單的方法確保onkeypress模仿onclick事件的行為:

links[i].onkeypress = links[i].onclick;

14、HTML-DOM提供了一個forms對象。這個對象可以把下面語句:

document.getElementsByTagName("form");

簡化為

document.forms;

舉例:

placeholder.src = source;

15、

<div id="testdiv">
<p>This is<em>my</em>content</p>
</div>

結構圖:(請原諒這張這么丑的圖-_-,本來我是想拍張照放上來的)

想把一段文本插入元素。用DOM語言說就是添加一個p元素節點,並把此節點作為div元素的一個子節點。

分兩步:(1)創建一個新的元素;(2)把這個新元素插入節點樹。

新創建出的p元素已存在,但它還不是任何一棵DOM節點樹的組成部分,稱之為文檔碎片(document fragment),還無法顯示在瀏覽器的窗口畫面里。

但這個p元素已經有一個nodeType和一個nodeName值。下面驗證:

function() {
    var para = document.createElement("p")
    var info = "nodeName";
    info += para.nodeName;
    info += " nodeType:";
    info+= para.nodeType;
    alert(info);
}

 16、把新創建的節點插入某個文檔的節點樹的最簡單的辦法是讓它成為這個文檔某個現有節點的一個子節點。

用appendChild方法把變量para插入變量testdiv:

testdiv.appendChild(para);

 

寫這么多花了70多分鍾吧。打算分三個部分寫,第一部分先寫到這,又累又熱。發現筆記本上還寫了點錯別字,少了標點符號,還得仔細辨別一下。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM