成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

【EASYDOM系列教程】之創(chuàng)建頁(yè)面元素

nifhlheimr / 1030人閱讀

摘要：對(duì)象提供了可以創(chuàng)建元素節(jié)點(diǎn)屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)的方法，方便更新頁(yè)面中的元素。是返回值，表示創(chuàng)建的元素。最后，通過(guò)方法創(chuàng)建屬性節(jié)點(diǎn)，并設(shè)置了屬性值為，再將該屬性節(jié)點(diǎn)添加到新創(chuàng)建的元素中。

Document 對(duì)象提供了可以創(chuàng)建元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)的方法，方便 DOM 更新 HTML 頁(yè)面中的元素。

創(chuàng)建元素節(jié)點(diǎn)

Document 對(duì)象提供了 createElement() 方法創(chuàng)建元素節(jié)點(diǎn)，其語(yǔ)法格式如下:

element = document.createElement(tagName);

上述語(yǔ)法格式中，tagName 是參數(shù)，表示創(chuàng)建元素的元素名稱(chēng)。element 是返回值，表示創(chuàng)建的元素。

值得注意的是: createElement() 方法優(yōu)先將參數(shù)轉(zhuǎn)換為小寫(xiě)。

下面是使用 createElement() 方法的示例代碼:

var div = document.getElementById("group");
// 創(chuàng)建新的元素節(jié)點(diǎn)
var elem = document.createElement("button");
div.appendChild(elem);

上述示例代碼通過(guò) createElement() 方法創(chuàng)建了 button 元素，并將其添加到 HTML 頁(yè)面中。

完整示例代碼請(qǐng)點(diǎn)擊右邊的鏈接: createElement() 方法完整示例代碼
創(chuàng)建文本節(jié)點(diǎn)

Document 對(duì)象提供了 createTextNode() 方法創(chuàng)建文本節(jié)點(diǎn)，其語(yǔ)法格式如下:

textNode = document.createTextNode(data);

上述語(yǔ)法格式中，data 是參數(shù)，包含了放在文本節(jié)點(diǎn)中的內(nèi)容，是一個(gè)字符串。textNode 是返回值，表示創(chuàng)建的文本節(jié)點(diǎn)。

下面是使用 createTextNode() 方法的示例代碼:

var div = document.getElementById("group");
// 創(chuàng)建新的元素節(jié)點(diǎn)
var elem = document.createElement("button");
// 創(chuàng)建文本節(jié)點(diǎn)
var text = document.createTextNode("New Button");
// 將文本節(jié)點(diǎn)添加到新的元素節(jié)點(diǎn)
elem.appendChild(text);
// 將新的元素節(jié)點(diǎn)添加到父級(jí)元素節(jié)點(diǎn)
div.appendChild(elem);

上述示例代碼先通過(guò) createElement() 方法創(chuàng)建了 button 元素，再通過(guò) createTextNode() 方法創(chuàng)建了一個(gè)新的文本節(jié)點(diǎn)，并將其添加到新創(chuàng)建的 button 元素中。

完整示例代碼請(qǐng)點(diǎn)擊右邊的鏈接: createTextNode() 方法完整示例代碼
創(chuàng)建屬性節(jié)點(diǎn)

Document 對(duì)象提供了 createAtrribute() 方法創(chuàng)建屬性節(jié)點(diǎn)，其語(yǔ)法格式如下:

attributeNode = document.createAttribute(name);

上述語(yǔ)法格式中，name 是參數(shù)，屬性節(jié)點(diǎn)的屬性名稱(chēng)。attributeNode 是返回值，表示創(chuàng)建的屬性節(jié)點(diǎn)。

值得注意的是:



創(chuàng)建屬性節(jié)點(diǎn)方法只具有屬性名稱(chēng)，沒(méi)有屬性值。想要設(shè)置屬性值需要通過(guò) nodeValue 屬性完成。


由于屬性節(jié)點(diǎn)不是元素節(jié)點(diǎn)的子節(jié)點(diǎn)，不能使用添加子節(jié)點(diǎn)方式操作屬性節(jié)點(diǎn)。想要添加屬性節(jié)點(diǎn)需要通過(guò) setAttributeNode() 方法完成。

下面是使用 createAtrribute() 方法的示例代碼:

var div = document.getElementById("group");
// 創(chuàng)建新的元素節(jié)點(diǎn)
var elem = document.createElement("button");
// 創(chuàng)建文本節(jié)點(diǎn)
var text = document.createTextNode("New Button");
elem.appendChild(text);
// 創(chuàng)建屬性節(jié)點(diǎn)
var attribute = document.createAttribute("class");
// 設(shè)置屬性的值
attribute.nodeValue = "button";
// 將屬性節(jié)點(diǎn)添加到元素節(jié)點(diǎn)
elem.setAttributeNode(attribute);
div.appendChild(elem);

上述示例代碼先通過(guò) createAtrribute() 方法創(chuàng)建了 ，再通過(guò) createTextNode() 方法創(chuàng)建了一個(gè)新的文本節(jié)點(diǎn)，并將其添加到新創(chuàng)建的 button 元素中。最后，通過(guò) createAttribute() 方法創(chuàng)建 class 屬性節(jié)點(diǎn)，并設(shè)置了屬性值為 button，再將該屬性節(jié)點(diǎn)添加到新創(chuàng)建的 button 元素中。

完整示例代碼請(qǐng)點(diǎn)擊右邊的鏈接: createAtrribute() 方法完整示例代碼

本教程免費(fèi)開(kāi)源，任何人都可以免費(fèi)學(xué)習(xí)、分享，甚至可以進(jìn)行修改。但需要注明作者及來(lái)源，并且不能用于商業(yè)。

本教程采用知識(shí)共享署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際許可協(xié)議進(jìn)行許可。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84060.html

相關(guān)文章

  • 【EASYDOM系列教程】之插入節(jié)點(diǎn)

    摘要：值得注意的是如果我們是將頁(yè)面中原有的節(jié)點(diǎn)插入到指定節(jié)點(diǎn)的子節(jié)點(diǎn)列表的最后面，那這個(gè)被插入的節(jié)點(diǎn)會(huì)先從原有的位置移除，再插入到指定的位置。 Node 對(duì)象提供了一些用于向 HTML 頁(yè)面插入節(jié)點(diǎn)的方法，通過(guò)這些方法我們可以實(shí)現(xiàn)向 HTML 頁(yè)面新增元素，或者移動(dòng) HTML 頁(yè)面中的元素。 appendChild() 方法 Node 對(duì)象提供的 appendChild() 方法可以向指定節(jié)...

    jk_v1 評(píng)論0 收藏0

  • 【EASYDOM系列教程】之定位頁(yè)面元素

    摘要：對(duì)象提供了屬性和方法實(shí)現(xiàn)定位頁(yè)面元素功能，這也是的標(biāo)準(zhǔn)規(guī)范中對(duì)象的主要應(yīng)用之一。是返回值，表示定位元素的集合，是一個(gè)集合。定位匹配選擇器的第一個(gè)元素。方法定位頁(yè)面元素所返回的集合就是靜態(tài)集合。 Document 對(duì)象提供了屬性和方法實(shí)現(xiàn)定位頁(yè)面元素功能，這也是 DOM 的標(biāo)準(zhǔn)規(guī)范中 Document 對(duì)象的主要應(yīng)用之一。 定位頁(yè)面元素方法 目前 Document 對(duì)象提供實(shí)現(xiàn)定位頁(yè)面元...

    NotFound 評(píng)論0 收藏0

  • 【EASYDOM系列教程】之 DOM 元素樹(shù)

    摘要：元素之間的關(guān)系在元素樹(shù)結(jié)構(gòu)中，主要具有以下三層關(guān)系。祖先與后代如果我們將頁(yè)面中某一個(gè)元素作為祖先的話(huà)，那包含在該元素內(nèi)的所有元素除子級(jí)之外的都可以稱(chēng)為該元素的后代。兄弟關(guān)系具有相同父級(jí)元素的兩個(gè)或幾個(gè)元素之間就是兄弟關(guān)系。 DOM 元素樹(shù)結(jié)構(gòu)與 DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu)很相似，區(qū)別僅在于是利用節(jié)點(diǎn)解析 HTML 元素，還是利用元素解析 HTML 元素。 DOM 樹(shù)結(jié)構(gòu) 還記得下面這張圖嗎? ...

    stormzhang 評(píng)論0 收藏0

  • 【EASYDOM系列教程】之定位頁(yè)面元素

    摘要：對(duì)象提供了屬性和方法實(shí)現(xiàn)定位頁(yè)面元素功能。定位匹配選擇器的第一個(gè)元素。是返回值，表示定位元素的集合，是一個(gè)集合。下面是使用方法的示例代碼循環(huán)遍歷所有元素上述代碼通過(guò)方法定位頁(yè)面中元素名為的元素，并遍歷所有得到的元素，為其元素的屬性添加樣式。 Element 對(duì)象提供了屬性和方法實(shí)現(xiàn)定位頁(yè)面元素功能。該對(duì)象與 Document 對(duì)象提供的屬性和方法實(shí)現(xiàn)定位頁(yè)面元素功能的區(qū)別在于，Docu...

    MartinDai 評(píng)論0 收藏0

  • 【EASYDOM系列教程】之Document 對(duì)象介紹

    摘要：對(duì)象的作用對(duì)象作為訪問(wèn)和更新頁(yè)面內(nèi)容的入口。這個(gè)結(jié)果充分地說(shuō)明了對(duì)象在的標(biāo)準(zhǔn)規(guī)范中代表整個(gè)頁(yè)面。對(duì)象的繼承鏈對(duì)象是繼承于對(duì)象的。對(duì)象也是的標(biāo)準(zhǔn)規(guī)范中非常重要的對(duì)象之一，而對(duì)象又是繼承于對(duì)象。 Document 對(duì)象是 DOM 的標(biāo)準(zhǔn)規(guī)范中比較重要的對(duì)象之一。該對(duì)象提供了訪問(wèn)和更新 HTML 頁(yè)面內(nèi)容的屬性和方法。 Document 對(duì)象的作用 Document 對(duì)象作為 DOM 訪問(wèn)和...

    JiaXinYi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<