EASYDOM系列教程 之建立頁面元素

2021-09-16 18:30:52 字數 2447 閱讀 4556

document 物件提供了可以建立元素節點、屬性節點和文字節點的方法,方便 dom 更新 html 頁面中的元素。

document 物件提供了 createelement() 方法建立元素節點,其語法格式如下:

element = document.createelement(tagname);
上述語法格式中,tagname 是引數,表示建立元素的元素名稱。element 是返回值,表示建立的元素。

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

下面是使用 createelement() 方法的示例**:

var div = document.getelementbyid('group');

// 建立新的元素節點

var elem = document.createelement('button');

上述示例**通過 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');

// 將文字節點新增到新的元素節點

// 將新的元素節點新增到父級元素節點

上述示例**先通過 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');

// 建立屬性節點

var attribute = document.createattribute('class');

// 設定屬性的值

attribute.nodevalue = 'button';

// 將屬性節點新增到元素節點

elem.setattributenode(attribute);

上述示例**先通過 createatrribute() 方法建立了 ,再通過 createtextnode() 方法建立了乙個新的文字節點,並將其新增到新建立的 button 元素中。最後,通過 createattribute() 方法建立 class 屬性節點,並設定了屬性值為 button,再將該屬性節點新增到新建立的 button 元素中。

createatrribute() 方法完整示例**

本教程免費開源,任何人都可以免費學習、分享,甚至可以進行修改。但需要註明作者及**,並且不能用於商業。

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

EASYDOM系列教程 之屬性操作

element 物件提供了一些方法實現 html 元素的屬性操作,這種操作要比 node 物件提供的方法操作屬性節點要更便捷。element 物件提供了 getattribute 方法用於獲取指定元素的屬性值,其語法結構如下 var attribute element.getattribute at...

EASYDOM系列教程 之插入節點

node 物件提供了一些用於向 html 頁面插入節點的方法,通過這些方法我們可以實現向 html 頁面新增元素,或者移動 html 頁面中的元素。var parent document.getelementbyid parent var button document.createelement ...

EASYDOM系列教程 之Node介紹

dom 的標準規範中提供了 node 物件,該物件主要提供了用於解析 dom 節點樹結構的屬性和方法。dom 樹結構主要是依靠節點進行解析,稱為 dom 節點樹結構。node 物件是解析 dom 節點樹結構的主要入口。node 物件提供的屬性和方法,可以實現遍歷節點 插入節點和替換節點等操作。而這些...