《JavaScript DOM 編程藝術》（第二版）讀書筆記（三）

時間 2019-11-24

標籤 javascript dom 編程藝術第二讀書筆記欄目 JavaScript 简体版

原文原文鏈接

第六章案例研究：圖片庫改進版javascript

這一章將根據第五章提到的內容對圖片庫進行了改進html

首先檢查DOM方法是否被遊覽器支持前端

if(!document.getElementById)  return false;
if(!document.getElementsByTagName)  return false;
if(!document.getElementById("placeholder"))
//.......相似的測試

接下來說到了一個重點內容：共享onload事件java

JavaScript每每須要在HTML文檔加載結束後執行，否則一些dom方法會找不到對象,這就是爲何jquery開頭要加$(document).ready()node

做者給出了一個有意思的方法，用於加載多個函數，這個方法看起來很簡單，但其中思想須要仔細領悟，這本書中之後的幾個方法的思路也是相似的jquery

addLoadEvent函數瀏覽器

function addLoadEvent(func) {
    var oldonload=window.onload;
    if(typeof window.onload != 'function'){
        window.onload=func;
    } else {
        window.onload= function (){
            oldonload();
            func();
        }
    }
}

1.把現有的window.onload事件處理函數存入變量oldonload.服務器

2.若是在這個處理函數上尚未綁定任何函數，就向平時同樣把函數添加給它.app

3.若是在這個處理函數上已經綁定了一些函數，就把新函數追加到現有函數末尾.dom

三元操做符

variable(變量) = condition(條件) ? if true : if else;

能夠看出三元操做符是if/else 的一種變體

nodeName屬性

返回元素的標籤名，老是返回大寫字母好比IMG,P,A等html標籤

第七章動態建立標記

document.write()方法能夠輕鬆的把字符串插入文檔，可是它不能作到javascript徹底與html分離，必須吧<script>放到<html>裏。

innerHTML屬性

該屬性被瀏覽器普遍支持，既能用於讀取，又能用於寫入。

利用這個技術沒法區分「插入一段html內容」與「寫入一段html內容」。一旦使用innerHTML,它的所有內容將被替換。

<div id="test">
  <p>this is <em>my</em> content.</p>
</div>
var text= document.getElementById("test").innerHTML
alrert(text) // <p>this is <em>my</em> content.</p>

<div id="test">
</div>
document.getElementById("test").innerHTML = "<p>this is <em>my</em> content.</p>"  //瀏覽器中會看到相應效果

DOM方法介紹

1.createElement方法

document.createElement(nodename);

建立一個元素節點，只不過屬於文檔碎片(document fragment),沒有成爲DOM節點樹的一部分，須要被添加進DOM樹。

2.appendChild方法

parent.appendChild(child)

把新建立的節點插入某個文檔的節點樹，讓它成爲這個文檔某個現有節點的子節點。

3.createTextNode方法

document.createNode(text)

建立一個文本節點，注意它與createElement的差異。

如今innerHTML方法就能用上述幾個DOM方實現了。

4.insertBefore()方法

parentElement.insertBefore(newElement,targetElement)

把一個新元素插入到一個現有元素的前面，必須告訴它父元素(parentElement)、新元素(newElement)、目標元素(targetElement)。

5.insertAfter()函數(DOM中沒有此方法)

function insertAfter(newElement,targetElement){
    var parent=targetElement.parentNode;
    if(parent.lastChild==targetElement){
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

parentNode屬性：父節點；nextSibling屬性：下一個兄弟元素節點；

這個函數十分簡單，卻效果很好。

Ajax

這是前端必須掌握的技能，如今頁面已經離不開Ajax效果了，開發人員通常用jquery來處理這一行爲，做者介紹了javasciprt方法

獲取XMLHttpRequest對象，做者提供了兼容的方法，記下就好

function getHTTPObject(){
    if(typeof XMLHttpRequest == "undefined")
    XMLHttpRequest = function(){
        try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
        catch(e){}
        try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
        catch(e){}
        try {return new ActiveXObject("Msxml2.XMLHTTP");}
        catch(e){}
        return false;
    }
    return new XMLHttpRequest();
}

做者提供了一個例子：

function getNewContent(){
    var request = getHTTPObject();
    if(request){
        request.open("GET","example.txt",true);
        request.onreadystatechange = function(){
            if(request.readyState==4){
                var para = document.createElement("p");
                var txt = document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementById('new').appendChild(para);
            }
        };
        request.send(null);
    } else{
        alert('Sorry,your browser doesn\'t support XMLHttpRequest');
    }
}
addLoadEvent(getNewContent);