DOM元素的操作

2021-09-10 17:22:28 字數 1531 閱讀 2919

dom元素的操作有動態建立dom元素,子父元素操作, dom元素追加,屬性設定等等....

前面詳細的總結了dom元素的獲取方式,這裡複習總結一下下...

使用createelement()方法建立元素

語法:document.createelement(nodename)

引數:nodename;      

引數描述:必須。建立元素的名稱。

返回值:建立的元素節點

使用setattribute() 方法新增指定的屬性,並為其賦指定的值。如果這個指定的屬性已存在,則僅設定/更改值。

語法:element.setattribute(attributename,attributevalue)

引數:引數

型別描述

attributename

string

必需。您希望新增的屬性的名稱。

attributevalue

string

必需。您希望新增的屬性值。

無返回值。

eg:

輸出結果:

獲取元素的自定義屬性使用getattribute() 方法返回指定屬性名的屬性值。

eg:

輸出結果:

js操作的是元素的行內樣式

輸出結果:

那麼js中如何操作元素的內嵌樣式呢?

輸出結果:

window.getcomputedstyle(元素).屬性  操作js中元素的所有樣式
之前有提過document.write()的用法,是往body中直接列印;

物件.innerhtml  往元素內容裡追加 

物件.innertext 往元素文字裡追加

insertbefore() 將新元素新增到舊元素之前

childelementcount 子節點的個數

找父元素裡面的 子節點 ,有兩個屬性 childnodes 返回的是所有的節點 ,children 返回的是元素節點

找元素的父級元素:parentnode, parentelement

找元素的同胞兄弟:nextsibling,nextelementsibling,nextelementsibling,previoussibling

Dom元素操作

把建立的p元素新增到父元素box裡 btn1.onclick function 移除父元素裡的p元素 插入元素 insertbefore 被插入的元素,參照元素 var dom document.getelementbyid dom var newdom document.createelement...

dom元素的操作方式

好久不見呀,csdn。最近一直才忙,今天先從乙個基礎知識點,dom元素的操作來說起吧。關於dom元素的操作,之前也有接觸過一點點,但需要注意的是,dom元素過多的建立會影響瀏覽器的效能。所以呢,求人不如求己,與其抱怨瀏覽器的效能和其他,不如先從優化自己的 開始。再嘮叨一下,何為dom dom doc...

jQuery的元素(DOM)操作

假設頁面上有一些元素如下 box 1 p 2 p 3 p div box div box div box div box div body 引入外部的jquery資源 jquery.js script 1.建立元素 2.插入元素 box 被div插入了 box div 把div插入到 box 中,這...