前面已經有一篇博文總結了一些dom的原生操作方法了，今天進個階吧^^
給乙個場景，其html結構如下（假設頁面中只有乙個ul標籤）：
（1）在第三個li下方增加乙個值為6的li
（2）刪除第二個li
（3）修改第四個li，更新其值為7
（4）為第二個li設定屬性class為「aa」
（5）為第乙個li設定樣式屬性color為red，字型大小為20px
具體實現如下：
//獲取指定的ul標籤
var ul=document.getelementsbytagname("ul")[0];
//獲取標籤ul下的所有li標籤
var lis=ul.getelementsbytagname("li");
/* (1)在第三個li下方增加乙個值為6的li */
var li=document.createelement("li");
li.innertext=6;
ul.insertbefore(li,lis[3]);
//此時列表項為 1 2 3 6 4
/* (2)刪除第二個li */
var thisli=lis[1];
ul.removechild(thisli);
//此時列表項為 1 3 6 4
/* (3)修改第4個li，更新其值為7 */
var thisli1=lis[3];
thisli1.innertext=7;
//此時列表項為 1 3 6 7
/* (4)為第二個li新增屬性class為"aa" */
lis[1].setattribute("calss","aa");
/*也可用以下方式：
lis[1].classname="aa";
*///相應還有刪除屬性的方法removeattribute(attrname)
/* (5)為第乙個li設定樣式屬性，color為red，字型大小為20pxpx */
lis[0].setattribute("style","color:blue; font-size:20px;");
/*也可用以下方式
lis[0].style.color="red";
lis[0].style.fontsize="20px"; //注意font-size和fontsize的寫法區別，字型大小為字串
*/
原生DOM 操作
dom.nodetype 檢視元素節點型別 dom.childnodes 檢視所有元素下面的所有子節點 空白節點也會獲取到 dom.children 檢視所有元素下面的所有子節點 只獲取元素節點 dom.firstchild 獲取第乙個子節點 dom.lastchild 獲取最後乙個子節點 dom....
js原生dom操作
1.建立元素 var a document.createelement a var node1 document.createelement div var node2 document.createtextnode hello world 2.新增子元素 刪除子元素 document.body.r...
原生DOM操作彙總
節點型別attr document element text 其他 節點之間的關係父節點 parentnode 子節點 childnodes 前乙個兄弟節點 nextsibling 後乙個兄弟節點 previoussibling 第乙個子節點 firstchild 最後乙個子節點 lastchild...