dom節點操作

2021-09-23 17:10:45 字數 1724 閱讀 1122

獲取節點元素的幾種方法

document.getelementbyid(""); // 通過元素選出id選出

document.getelementsbyclassname(""); // 通過元素選出class選出

document.getelementsbytagname(""); // 通過元素的標籤名選出

document.getelementsbyname(""); // 通過元素的name屬性的值選出

他們都是document裡的方法所以前面都有document.值得一提的時getelement後有s的獲取出來的時乙個元素的集合,他類似陣列,並且有陣列的一些屬性。

獲取的到的元素時document裡的物件,既然是物件就會有屬性和方法

!!!

!!!建立乙個屬性節點

var attribute = document.createattibute("style"); 

console.log(attribute); // style=" " 建立出來的屬性節點沒有值 ,這個是放到行間的

對屬性節點賦值

attribute.value = "color:red";

console.log(attribute); // style="color:red"

建立元素節點

var element = document.createelement("div");
建立文字節點

var textnode = document.createtextnode("文字內容");
將文字節點給元素節點

console.log(element); //文字內容

將屬性節點給元素節點

element.getattributenode(attribute);

console.log(element); // 文字內容

將建立的元素節點放到頁面裡

var body = document.getelementsbytagname("body")[0];// 獲取body元素
!!!

元素節點之間的操作

以上是節點的屬性可以疊加使用

節點的方法

主要有增、刪、改、查

removechild(node);// 刪除子節點

replacechild(newnode,oldnode);// 替換節點

insertbefore(a,b);// 將a節點放到b節點前

setattribute("屬性名","屬性值") ;// 給節點新增屬性

getarrtibute("屬性名"); // 檢視節點屬性

DOM節點操作

節點型別 nodetype nodename nodevalue 含義element node 1標籤名 eg div null 元素節點 attribute node 2特性名 eg class 特性值特性節點 text node 3 text 文字的內容 文字節點 cdata section n...

操作dom節點

取到節點物件可以,我們可以建立乙個節點後動態插入到dom節點樹中 html中 1 建立乙個文字節點 第一段第二段 第三段 js var div document getelementsbytagname div 0 var textnode document createtextnode 文字節點 ...

DOM 節點操作

方法名 只能document呼叫 返回單一的值 返回動態集合 getelementbyid getelementsbytagname getelementsbyclassname queryselectorall queryselector 建立節點document.createelement ta...