成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

nifhlheimr / 958人閱讀

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

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

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

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

element = document.createElement(tagName);

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

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

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

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

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

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

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

textNode = document.createTextNode(data);

上述語法格式中，data 是參數(shù)，包含了放在文本節(jié)點(diǎn)中的內(nèi)容，是一個字符串。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)添加到父級元素節(jié)點(diǎn)
div.appendChild(elem);

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

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

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

attributeNode = document.createAttribute(name);

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

值得注意的是:



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


由于屬性節(jié)點(diǎn)不是元素節(jié)點(diǎn)的子節(jié)點(diǎn)，不能使用添加子節(jié)點(diǎn)方式操作屬性節(jié)點(diǎn)。想要添加屬性節(jié)點(diǎn)需要通過 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);

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84060.html

相關(guān)文章

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

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

    jk_v1 評論0 收藏0

  • 【EASYDOM系列教程】之定位頁面元素

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

    NotFound 評論0 收藏0

  • 【EASYDOM系列教程】之 DOM 元素樹

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

    stormzhang 評論0 收藏0

  • 【EASYDOM系列教程】之定位頁面元素

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

    MartinDai 評論0 收藏0

  • 【EASYDOM系列教程】之Document 對象介紹

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

    JiaXinYi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<