【EASYDOM系列教程】之創建頁面元素

nifhlheimr 發布于2019-08-20 18:04 / 939人閱讀

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

Document 對象提供了可以創建元素節點、屬性節點和文本節點的方法，方便 DOM 更新 HTML 頁面中的元素。

創建元素節點

Document 對象提供了 createElement() 方法創建元素節點，其語法格式如下:

element = document.createElement(tagName);

上述語法格式中，tagName 是參數，表示創建元素的元素名稱。element 是返回值，表示創建的元素。

值得注意的是: createElement() 方法優先將參數轉換為小寫。

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

var div = document.getElementById("group");
// 創建新的元素節點
var elem = document.createElement("button");
div.appendChild(elem);

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

完整示例代碼請點擊右邊的鏈接: createElement() 方法完整示例代碼

創建文本節點

Document 對象提供了 createTextNode() 方法創建文本節點，其語法格式如下:

textNode = document.createTextNode(data);

上述語法格式中，data 是參數，包含了放在文本節點中的內容，是一個字符串。textNode 是返回值，表示創建的文本節點。

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

var div = document.getElementById("group");
// 創建新的元素節點
var elem = document.createElement("button");
// 創建文本節點
var text = document.createTextNode("New Button");
// 將文本節點添加到新的元素節點
elem.appendChild(text);
// 將新的元素節點添加到父級元素節點
div.appendChild(elem);

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

完整示例代碼請點擊右邊的鏈接: createTextNode() 方法完整示例代碼

創建屬性節點

Document 對象提供了 createAtrribute() 方法創建屬性節點，其語法格式如下:

attributeNode = document.createAttribute(name);

上述語法格式中，name 是參數，屬性節點的屬性名稱。attributeNode 是返回值，表示創建的屬性節點。

值得注意的是:

創建屬性節點方法只具有屬性名稱，沒有屬性值。想要設置屬性值需要通過 nodeValue 屬性完成。

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

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

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

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

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

本教程免費開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。

本教程采用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

云服務器 GPU云服務器系列之系列之二架構之坑系列 linux系列教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84060.html

【EASYDOM系列教程】之插入節點

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

jk_v1 2019-08-20 18:23 評論0 收藏0
【EASYDOM系列教程】之定位頁面元素

摘要：對象提供了屬性和方法實現定位頁面元素功能，這也是的標準規范中對象的主要應用之一。是返回值，表示定位元素的集合，是一個集合。定位匹配選擇器的第一個元素。方法定位頁面元素所返回的集合就是靜態集合。 Document 對象提供了屬性和方法實現定位頁面元素功能，這也是 DOM 的標準規范中 Document 對象的主要應用之一。定位頁面元素方法目前 Document 對象提供實現定位頁面元...

NotFound 2019-08-20 18:04 評論0 收藏0
【EASYDOM系列教程】之 DOM 元素樹

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

stormzhang 2019-08-21 12:00 評論0 收藏0
【EASYDOM系列教程】之定位頁面元素

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

MartinDai 2019-08-21 12:00 評論0 收藏0
【EASYDOM系列教程】之Document 對象介紹

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

JiaXinYi 2019-08-21 11:48 評論0 收藏0