JavaScript DOM——“節(jié)點層次”的注意要點

andycall 發(fā)布于2019-08-19 17:12 / 759人閱讀

摘要：所有節(jié)點的屬性，用于表明節(jié)點的類型。節(jié)點具有以下特征以及其子節(jié)點可能是一個最多一個最多一個或。表示全部標(biāo)簽方法該方法返回給定特性的所有元素。實現(xiàn)處理事件的接口。類型該類型用于表現(xiàn)或元素，提供了對元素標(biāo)簽名子節(jié)點及特性的訪問。

幾個概念：

DOM：文檔對象模型，是針對 HTML 和 XML 文檔的一個 API（應(yīng)用程序編程接口）。

根節(jié)點：就是 Document 節(jié)點。

nodeType: 所有節(jié)點的屬性，用于表明節(jié)點的類型。

Node 類型

DOM1 級的接口，該接口除了 IE 之外，在其他所有瀏覽器中都可以訪問到這個類型。

節(jié)點類型由在 Node 類型中定義的下列 12 個數(shù)值常量來表示，任何節(jié)點類型必居其一：

Node.ELEMENT_NODE;

Node.ATTRIBUTE_NODE;

Node.TEXT_NODE;

Node.CDATA_SECTION_NODE;

Node.ENTITY_REFERENCE_NODE;

Node.ENTITY_NODE;

Node.PROCESSING_INSTRUCTION_NODE;

Node.COMMENT_NODE;

Node.DOCUMENT_NODE;

Node.DOCUMENT_TYPE_NODE;

11. Node.DOCUMENT_FRAGMENT_NODE;
12. Node.NOTATION_NODE;

分別返回 1-12 數(shù)值。

如：

hello this is h1
hello this is h2
this is a paragraph

console.log(document.getElementById("h1").nodeType == Node.ELEMENT_NODE); //true

因為 IE 兼容性問題，Node 類型的構(gòu)造函數(shù)無效，最好還是將它換成數(shù)字值進行比較。如：

console.log(document.getElementById("h1").nodeType == 1); //true

nodeName和nodeValue屬性

在使用這兩個屬性之前，最好是先檢測一下節(jié)點的類型：

if (someNode.nodeValue == 1){
    value = someNode.nodeName;
}


console.log(document.getElementById("input").nodeName); //INPUT
console.log(document.getElementById("input").nodeValue); //null

對于元素節(jié)點（Node.ELEMENT_NODE）,nodeName 中始終是元素的標(biāo)簽名，nodeValue 中則為 null。

節(jié)點關(guān)系 childNodes屬性和NodeList對象和它的item()方法

前者中保存著一個 NodeList 對象；

后者并不是 Array 的實例；

可以通過方括號和 item() 方法來訪問在后者的節(jié)點；

如：

this is a paragraph

var para = document.getElementById("p");
var array = Array.prototype.slice.call(para.childNodes,0);
console.log(array);

上述代碼在 IE8 中無效，因為 IE8 及更早版本將 NodeList 實現(xiàn)為一個 COM 對象。但下面的代碼可以在所有瀏覽器中運行：

function convertToArray(nodes){
    var array = null;
    try{
        array = Array.prototype.slice.call(nodes,0);
    }catch(ex){
        array = new Array();
        for (var i=0; i

parentNode屬性和previousSibling、nextSibling屬性
parentNode屬性指向文檔樹中的父節(jié)點；同胞節(jié)點中第一個節(jié)點的previousSibling屬性的值為null；同理最后一個節(jié)點的nextSibling屬性的值也為null。如：
if (someNode.nextSibling === null){
    console.log("last node in the parent"s childNodes list.");
} else if(someNode.previousSibling === null){
    console.log("first node in the parent"s childNodes list.");
}


firstChild屬性和lastChild屬性
這兩個屬性分別等于：    someNode.childNodes[0]和someNode.childNodes[someNode.childNodes.length - 1];

hasChildNodes()方法和ownerDocument屬性
前者返回是否包含子節(jié)點的布爾值；后者指向表示整個文檔的文檔節(jié)點。
hello this is h1

var title = document.getElementById("h1");
console.log(title.childNodes) //["hello this is h1"]

hello this is h1
var title = document.getElementById("h1");
console.log(title.ownerDocument.nodeType) //9

操作節(jié)點
以下述代碼為例：
this is a paragraph


appendChild()方法
該方法用于向 childNodes 列表的末尾添加一個節(jié)點。其中，如果在 調(diào)用 appendChild() 時傳入了父節(jié)點的第一個子節(jié)點，那么該節(jié)點就會成為父節(jié)點的最后一個子節(jié)點，如：
var txt = document.getElementById("p");
txt.appendChild(txt.firstChild);
console.log(txt.childNodes) //[, "this is a paragraph"]


insertBefore()方法
用于把節(jié)點放在 childNodes 列表中某個特定的位置上。接收兩個參數(shù)：要插入的節(jié)點和作為參照的節(jié)點，如：
var txt = document.getElementById("p");

var newNode = document.createElement("p");
var newNode_value = document.createTextNode("hello there");
newNode.appendChild(newNode_value);

txt.insertBefore(newNode, txt.lastChild);
document.write(Array.prototype.slice.call(txt.childNodes,0));//[object Text],[object HTMLParagraphElement],[object HTMLImageElement]

如果參照節(jié)點為 null，則 insertBefore() 與 appendChild() 執(zhí)行相同的操作。

replaceChild()方法
該方法接收兩個參數(shù)：要插入的節(jié)點和要替換的節(jié)點，如：
var txt = document.getElementById("p");

var newNode = document.createElement("p");
var newNode_value = document.createTextNode("hello there");
newNode.appendChild(newNode_value);

txt.replaceChild(newNode, txt.lastChild);
document.write(Array.prototype.slice.call(txt.childNodes,0));//[object Text],[object HTMLParagraphElement]


removeChild()方法
該方法接收一個參數(shù)：要刪除的節(jié)點，如：
var txt = document.getElementById("p");

txt.removeChild(txt.lastChild);
document.write(Array.prototype.slice.call(txt.childNodes,0));//[object Text]

其他方法

cloneNode()方法
該方法所有類型節(jié)點都具有；用于創(chuàng)建調(diào)用這個方法的節(jié)點的一個完全相同的副本。接收一個參數(shù)，表示是否執(zhí)行深賦值。true 執(zhí)行深復(fù)制，復(fù)制節(jié)點及整個子節(jié)點樹；false 執(zhí)行淺復(fù)制，只復(fù)制節(jié)點本身，后要通過 appendChild() 等方法添加到文檔中。如：

    item 1
    item 2
    item 3


var myList = document.getElementById("unordered");
var deepList = myList.cloneNode(true);
console.log(deepList.childNodes.length); //7 (IE < 9 版本情況下為3，因為不會創(chuàng)建空白符節(jié)點。)

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length); //0


normalize()方法
該方法的作用是處理文檔樹中的文本節(jié)點。在出現(xiàn)文本節(jié)點不包含文本，或者連接出現(xiàn)兩個文本節(jié)點的情況下，就刪除它。
Document 類型
JavaScript 通過 Document 類型表示文檔，在瀏覽器中，document 對象是 HTMLDocument 的一個實例，表示整個 HTML 頁面。Document 節(jié)點具有以下特征：

console.log(document.nodeType + document.nodeName + document.nodeValue + document.parentNode + document.ownerDocument); //9#documentnullnullnull

以及其子節(jié)點可能是一個 DocumentType（最多一個）、Element（最多一個）、ProcessingInstruction 或 Comment。


文檔的子節(jié)點

documentElement屬性和body屬性
其子節(jié)點可能是一個 DocumentType（最多一個）、Element（最多一個）、ProcessingInstruction 或 Comment。但還有兩個內(nèi)置的訪問其子節(jié)點的方式：一個是 documentElement 屬性，該屬性始終指向  元素如：
var html = document.getElementsByTagName("html")[0];
console.log(document.documentElement === html); //true

var html = document.firstChild;
console.log(document.documentElement === html); //true

var html = document.childNodes[0];
console.log(document.documentElement === html); //true

以上代碼建立在如下網(wǎng)頁源代碼之上：

    
    
    
    
    


另外一個則是 body 屬性。直接指向  元素。

DocumentType即doctype屬性
通常將  標(biāo)簽看成一個與文檔其他部分不同的實體，可以通過 doctype 屬性（document.doctype）查看。如：


    
    
    
    
    


瀏覽器對 document.doctype 的支持差別很大，主要有：

IE8 及之前的版本：當(dāng)做注釋，document.doctype 的值為 null；

IE9+ 及 Firefox：作為第一個子節(jié)點；

Safari、Chrome 和 Opera：不作為文檔的子節(jié)點。


另外，按理說出現(xiàn)在 html 標(biāo)簽之外的注釋也算是文檔的子節(jié)點。如：


    
    
    
    



瀏覽器在處理位于 html 標(biāo)簽之外的注釋方面存在如下差異：

IE8 及之前的版本、Safari 3.1 及更高的版本、Opera 和 Chrome 只為第一條注釋創(chuàng)建節(jié)點；

IE9 及更高的版本將兩個注釋都創(chuàng)建為節(jié)點；

Firefox、Safari 3.1 之前的版本會忽略這兩個注釋。


文檔信息

title屬性
document 對象的另一個屬性是 title，包含這 title 元素中的文本，但是修改 title 屬性的值并不會
改變 title 標(biāo)簽元素。如：
var x = setTimeout(setTitle, 1000);
function setTitle(){
    document.title = "Hello";
    var y = setTimeout(setTitle2, 1000);
    function setTitle2(){
        document.title = "World";
        x = setTimeout(setTitle, 1000);
    }
}

以上代碼可以以1秒的速度自動切換顯示 title 標(biāo)簽的內(nèi)容

URL、domain和referrer屬性
三者分別包含完整的 URL；頁面的域名以及連接到當(dāng)前頁面的那個頁面的 URL。三個屬性當(dāng)中只有 domain 是可以設(shè)置的。如：
//假設(shè)頁面來自 p2p.wrox.com 域

document.domain = "wrox.com"; //成功
document.domain = "baidu.com"; //失敗

另外，由于跨域安全限制，來自不同的子域的頁面無法通過 js 通信。還有，如果域名一開始是“松散的”(loose)，那么就不能再設(shè)置為“緊繃的”(tight)。即將 document.domain 設(shè)置為"wrox.com"之后，就不能再將其設(shè)置回"p2p.wrox.com"否則將出錯。
查找元素

getElementById()方法
該方法接收一個參數(shù)即元素的 ID。以下面的元素為例：
Some text

可以使用下面的代碼取得這個元素：
var div = document.getElementById("myDiv");
var div = document.getElementById("mydiv"); //無效的ID 但是可以在 IE7 及更早的版本中使用

如果文檔中出現(xiàn)多個 ID 相同的元素，則取得第一次出現(xiàn)的那個。
IE7 及更早的版本在 name 特性與給定的 ID 匹配的表單元素（input textarea button select）也會被該方法訪問。如：

Some text

console.log(document.getElementById("myElement"));

所以最好不要把 id 與 name 設(shè)置成同一個名稱。

getElementsByTagName()方法、HTMLCollection屬性以及namedItem()方法
前者接收一個參數(shù)即要去的的元素的標(biāo)簽名，后者則是該方法返回的對象，如下代碼將取得所有 img 元素，并返回一個 HTMLCollection 對象：





console.log(document.getElementsByTagName("img").length); //4

這里返回的 HTMLCollection 對象可以通過方括號語法或 item() 方法來訪問：

    
    
    
    
    


另外，可以通過namedItem()方法來獲得指定的 name 特性的項如：

    
    
    


當(dāng)然也可以使用方括號語法：

    
    
    


在后臺，對數(shù)值索引就會調(diào)用 item()，而對字符串索引就會調(diào)用 namedItem()。
另外，可以向 getElementsByTagName() 中傳入“*”。表示全部標(biāo)簽；

getElementsByName()方法
該方法返回給定 name 特性的所有元素。最常用的情況是取得單選按鈕。

    
        Which color do you perfer?
        
            
                
                Red
            
            
                
                Green
            
            
                
                Blue
            
        
    
    


在這里 namedItem() 方法只會取得第一項，因為每一項的 name 特性都是 color。
特殊集合（.anchors/.forms/.images/.links）

document.anchors：文檔中所有帶 name 特性的 a 元素；

document.applets：文檔中的所有 applet 元素。已經(jīng)不推薦使用 applet 元素了。

document.forms：文檔中所有 form 元素

document.images：文檔中所有 img 元素

document.links：文檔中所有帶 href 特性的 a 元素；


如下：



abc
abc
abc

console.log(document.anchors.length); //2
console.log(document.forms.length); //2
console.log(document.links.length); //3

DOM 一致性檢測

document.implementation屬性與hasFeature()方法
由于 DOM 有多個級別，包含多個部分，因此檢測瀏覽器實現(xiàn)了 DOM 的哪些部分是非必要。該方法接收兩個參數(shù)：要檢測的 DOM 功能的名稱及版本號。如果瀏覽器支持，則返回 true，如：
console.log(document.implementation.hasFeature("XML", "1.0")); //True

列表如下：
Core    實現(xiàn) Node、Element、Document、Text 和其他所有DOM實現(xiàn)都要求實現(xiàn)的基本接口 所有遵守 DOM 標(biāo)準(zhǔn)的實現(xiàn)都必須支持該模塊。

HTML    實現(xiàn) HTMLElement、HTMLDocument 和其他 HTML 專有接口。

XML 實現(xiàn) Entity、EntityReference、ProcessingInstruction、Notation 和其他 XML 文檔專用的節(jié)點類型。

StyleSheets 實現(xiàn)描述普通樣式表的簡單接口。

CSS 實現(xiàn) CSS 樣式表專有的接口。

CSS2    實現(xiàn) CSS2Properties 接口。

Events  實現(xiàn)基本的事件處理接口。

UIEvents    實現(xiàn)處理用戶界面事件的接口。

MouseEvents 實現(xiàn)處理鼠標(biāo)事件的接口。

HTMLEvents  實現(xiàn)處理 HTML 事件的接口。

MutationEvents  實現(xiàn)處理文檔變化事件的接口。

Range   實現(xiàn)操作文檔范圍的接口。

Traversal   實現(xiàn)進行高級文檔遍歷的接口。

Views   實現(xiàn)處理文檔視圖的接口。

文檔寫入

write()、writeln()、open()以及close()

其中，writeln() 會在字符串最后添加一個換行符（
）如：
document.write("hello");
document.writeln("there"); //最后面有個換行符
document.write("anybodyHome?");
//hellothere anybodyHome?

此外，還可以使用 write() 和 writeln() 方法動態(tài)地包含外部資源。
需要注意的是，如果在文檔加載完畢后再執(zhí)行 document.write 則會重寫文檔。
方法 open() 和 close() 分別用于打開和關(guān)閉網(wǎng)頁的輸出流。
Element 類型
該類型用于表現(xiàn) XML 或 HTML 元素，提供了對元素標(biāo)簽名、子節(jié)點及特性的訪問。主要特性如下：
var x = document.getElementsByTagName("p")[0];
console.log(x.tagName); //P
console.log(x.nodeName); //P
console.log(x.nodeType); //1
console.log(x.nodeValue); //null
console.log(x.parentNode); //HTMLDivElement

其子節(jié)點可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference。
因為 XML 和 HTML 的標(biāo)簽名大小寫關(guān)系，在比較標(biāo)簽名的時候最好先轉(zhuǎn)換成小寫，如：
var x = document.getElementsByTagName("p")[0];
if (x.tagName === "p") {
    console.log("testing1");
};
if (x.tagName.toLowerCase() === "p") {
    console.log("testing2");
};
//testing2

HTML元素
所有 HTML 元素都由 HTMLElement 類型表示，標(biāo)準(zhǔn)特性如下：

id：元素的唯一標(biāo)識符；

title：附加說明信息；

lang：語言代碼；

dir：語言方向；

className：元素的 class 特性對應(yīng)，即 CSS 類。


如：


var div = document.getElementById("bd");
console.log(bd.dir); //ltr

另外還有其他眾多 HTML 元素以及與之關(guān)聯(lián)的類型。這里不再累述。
取得特性

getAttribute()方法
該方法主要是取得特性的值；
需要注意的是，任何元素的所有特性，都可以通過 DOM 元素本身的屬性來訪問。但是自定義的特性不會以屬性的形式添加到 DOM 對象中。如：



由于各種原因，應(yīng)該只有在取得自定義特性值的情況下，才會使用該方法，如：



另外需要注意的是，根據(jù) HTML5 規(guī)范，自定義特性應(yīng)該加上 data- 前綴以便驗證，如：



設(shè)置特性

setAttribute()方法
該方法接收兩個參數(shù)：要設(shè)置的特性名和值。如果特性名存在，則執(zhí)行替換操作。如：



綜上所述，在取得特性值的情況下，最好用getAttribute()方法取得自定義特性，用 DOM 屬性訪問公認的特性；在設(shè)置特性值的情況下，最好用 DOM 屬性來設(shè)置公認的特性，用setAttribute()方法設(shè)置自定義特性。如：



總之，最好直接通過屬性來讀取和設(shè)置特性。

removeAttribute()方法
一個參數(shù)，IE6 及以前的版本不支持該方法。如：



attributes 屬性
該屬性包含一個 NamedNodeMap 對象，該對象有下列方法（不常用）：

getNamedItem(Name)：返回 nodeName 屬性等于 Name 的節(jié)點；

removeNamedItem(Name)：移除指定的節(jié)點；

setNamedItem(Node)：添加指定的節(jié)點；

item(pos)：返回位于數(shù)字 pos 位置的節(jié)點；


具體如下：

    hhh


var pId = document.getElementById("pId");
var namedItem = pId.attributes.getNamedItem("id").nodeValue;
console.log(namedItem); //pId
var attrList = pId.attributes.item(0).nodeValue; //pId
console.log(attrList);
pId.attributes.removeNamedItem("id");
console.log(pId.id); //

該屬性經(jīng)常涌來遍歷元素的特性，如：
hhh

var pElem = document.getElementById("pId");

function outputAttributes(element) {
    var pairs = new Array();
    var attrName, attrValue, i, len;
    for (i = 0, len = element.attributes.length; i < len; i++) {
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName + "="" + attrValue + """);
    }
    return pairs.join(" ");
}
console.log(outputAttributes(pElem)); //id="pId" name="para"

但是需要強調(diào)的是：

不通瀏覽器返回的順序不通；

IE7 及更早的版本會返回 HTML 元素中所有可能的特性，包括沒有指定的特性


每個特性節(jié)點都有一個名為 specified 的屬性，這個屬性的值如果為 true，則意味著要么是在 HTML 中制定了相應(yīng)特性，要么是通過 setAttribute() 方法設(shè)置了該特性。
上面的代碼兼容性考慮，應(yīng)該改為下面這樣：
hhh

var pElem = document.getElementById("pId");

function outputAttributes(element) {
    var pairs = new Array();
    var attrName, attrValue, i, len;
    for (i = 0, len = element.attributes.length; i < len; i++) {
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        if (element.attributes[i].specified) {
            pairs.push(attrName + "="" + attrValue + """);
        };
    }
    return pairs.join(" ");
}
console.log(outputAttributes(pElem)); //id="pId" name="para"

創(chuàng)建元素

createElement()方法
該方法接收一個參數(shù)，即要創(chuàng)建元素的標(biāo)簽名。用該方法創(chuàng)建的新元素被賦予了ownerDocument屬性。隨后通過appendChild()等方法添加到文檔樹中。如：
var newElementP = document.createElement("p");
var newElementPValue = document.createTextNode("data");
newElementP.title = "im title";
newElementP.appendChild(newElementPValue);
document.body.appendChild(newElementP);
console.log(newElementP.lastChild.nodeValue); //data
console.log(newElementP.title); //im title

在 IE 中可以用另一種方式使用 createElement()，即為這個方法傳入完整的元素標(biāo)簽，也可以包含屬性，但這種方法存在很多問題，不建議使用。(具體見《js高級程序設(shè)計》第十章節(jié)點層次 Element 類型)
元素的子節(jié)點
以下面代碼為例：

    1
    2
    3


var list = document.getElementById("ulList");
var childNodesList = list.childNodes;
console.log(childNodesList.length); //7

for (var i = childNodesList.length - 1; i >= 0; i--) {
    if (childNodesList[i].nodeType == 1) {
        console.log(childNodesList[i].nodeName); //LI*3
    };
};
for (var i = childNodesList.length - 1; i >= 0; i--) {
    if (childNodesList[i].nodeType == 3) {
        document.write(childNodesList[i].nodeValue); //LI*3的text節(jié)點值1、2、3
    };
};

如同上面的代碼一樣，如果需要通過 childNodes 屬性遍歷子節(jié)點，呢么一定要在操作以前檢查 nodeType 屬性。因為不同的瀏覽器會返回不同的節(jié)點個數(shù)：
1
2
3

這里才會返回 childNodesList.length 為3。
如果要返回上面代碼中的所有 li 元素，可以使用如下代碼：
var ulList = document.getElementById("ulList");
var liList = ulList.getElementsByTagName("li");
console.log(liList.length); //3

Text 類型
要注意的是，字符串會經(jīng)過 HTML 或 XML 編碼。如：
var pElem = document.getElementById("pId");
pElem.firstChild.nodeValue = "hello there";
console.log(pElem.innerHTML); //hello there
創(chuàng)建文本節(jié)點

createTextNode()方法
該方法創(chuàng)建文本節(jié)點，接收一個參數(shù)即文本字符串。按理說一個元素只有一個文本節(jié)點，但是如果為其賦予了多個節(jié)點，那么這些節(jié)點中的文本就會連起來，并且中間沒有空格。如：
var newP = document.createElement("p");
var newPValue = document.createTextNode("data");
newP.appendChild(newPValue);
document.body.appendChild(newP);
var anotherPValue = document.createTextNode("anotherData");
newP.appendChild(anotherPValue); //dataanotherData

規(guī)范化文本節(jié)點

normalize()方法
該方法在一個包含兩個或多個文本節(jié)點的父元素上調(diào)用，將會把所有文本節(jié)點合成成一個節(jié)點。如：
var newP = document.createElement("p");
var newPValue = document.createTextNode("data");
newP.appendChild(newPValue);
document.body.appendChild(newP);
var anotherPValue = document.createTextNode("anotherData");
newP.appendChild(anotherPValue); //dataanotherData
console.log(newP.childNodes.length); //2
newP.normalize();
console.log(newP.childNodes.length); //1

分割文本節(jié)點

splitText()方法
這個方法將一個文本節(jié)點分成兩個文本節(jié)點，原來的文本節(jié)點包含從開始到指定位置之前的內(nèi)容；新的文本節(jié)點將包含剩下的文本。這個方法會返回一個新文本節(jié)點。如：
var newP = document.createElement("p");
var newPValue = document.createTextNode("data");
newP.appendChild(newPValue);
document.body.appendChild(newP);
var anotherPValue = document.createTextNode("anotherData");
newP.appendChild(anotherPValue); //dataanotherData

newP.normalize();
var anotherNewP = newP.firstChild.splitText(4);
console.log(newP.firstChild.nodeValue); //data
console.log(newP.lastChild.nodeValue); //anotherData

newP.normalize();
console.log(newP.firstChild.nodeValue); //dataanotherData

Comment 類型

createComment()方法
該方法可以創(chuàng)建注釋節(jié)點。不過鮮有人使用。擁有除 splitText() 之外的所有字符串操作方法。
CDATASection 類型
該類型只有在真正的 XML 文檔中可以使用以下方法，瀏覽器會解釋他為 Comment 類型：

    


console.log(document.getElementById("myDiv").firstChild); //Comment


createCDataSection()方法
該方法用來創(chuàng)建 CDATA 區(qū)域，只需為其傳入節(jié)點的內(nèi)容即可
DocumentType 類型
不常用。包含著與文檔的 doctype 有關(guān)的所有信息。
該類型對象的三個屬性：name、entities 和 notations。其中，name 表示文檔類型的名稱；entities 是由文檔類型描述的實體的 NamedNodeMap 對象；notations 是由文檔類型描述的符號的 NamedNodeMap 對象。一般來說只有 name 有點用。
console.log(document.doctype.name); //html

IE 不支持。
DocumentFragment 類型

createDocumentFragment()方法
主要作用就是用來避免通過逐個添加元素所導(dǎo)致的瀏覽器反復(fù)渲染新信息的問題，使用一個文檔片段來保存創(chuàng)建的元素，然后再一次性將它們添加到文檔中。如：


var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;

for (var i = 0; i < 3; i++) {
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Item" + (i + 1)));
    fragment.appendChild(li);
};

ul.appendChild(fragment);

Attr 類型
該對象又3個屬性：name、value 和 specified。但使用getAttribute()、setAttribute()和removeAttribute()方法更好用。

云服務(wù)器 GPU云服務(wù)器 javascript的dom對象 javascript的dom編程 javascript dom javascript dom 編程藝術(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78283.html

發(fā)表評論

登陸后可評論

0條評論

andycall

男|高級講師

我要關(guān)注我要私信

TA的文章

通配符證書有什么好處?常用通配符SSL證書有哪些?

閱讀 1221·2021-09-03 10:44
我所知道的flex布局 —— 上篇

閱讀 618·2019-08-30 13:13
如何造一個移動端的聯(lián)動選擇器（一）

閱讀 2810·2019-08-30 13:11
CSS魔法堂：你真的理解z-index嗎？

閱讀 1976·2019-08-30 12:59
前端每日實戰(zhàn)：32# 視頻演示如何用純 CSS 創(chuàng)作六邊形按鈕特效

閱讀 1044·2019-08-29 15:32
CSS3 border-radius妙用

閱讀 1609·2019-08-29 15:25
Vue 實用分頁組件paging（頁數(shù)太多時顯示省略號）

閱讀 1003·2019-08-29 12:24
Go 語言 Excel 類庫 Excelize 2.0.0 版本發(fā)布

閱讀 1293·2019-08-27 10:58

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript DOM——“節(jié)點層次”的注意要點

hello this is h1

hello this is h2

hello this is h1

hello this is h1

相關(guān)文章

***javaScript* 高級程序設(shè)計筆記——*DOM***

**《JavaScript 闖關(guān)記》之 DOM（上）**

React要點入門學(xué)習(xí)總結(jié)

JavaScript JavaScript與XML——“XML DOM”的注意要點

JavaScript JavaScript與XML——“XML DOM”的注意要點

發(fā)表評論

0條評論

andycall

男|高級講師

TA的文章

通配符證書有什么好處?常用通配符SSL證書有哪些?

我所知道的flex布局 —— 上篇

如何造一個移動端的聯(lián)動選擇器（一）

CSS魔法堂：你真的理解z-index嗎？

前端每日實戰(zhàn)：32# 視頻演示如何用純 CSS 創(chuàng)作六邊形按鈕特效

CSS3 border-radius妙用

Vue 實用分頁組件paging（頁數(shù)太多時顯示省略號）

Go 語言 Excel 類庫 Excelize 2.0.0 版本發(fā)布

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript DOM——“節(jié)點層次”的注意要點

hello this is h1

hello this is h2

hello this is h1

hello this is h1

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！