好久不見呀，csdn。最近一直才忙，今天先從乙個基礎知識點，dom元素的操作來說起吧。關於dom元素的操作，之前也有接觸過一點點，但需要注意的是，dom元素過多的建立會影響瀏覽器的效能。所以呢，求人不如求己，與其抱怨瀏覽器的效能和其他，不如先從優化自己的**開始。再嘮叨一下，何為dom （dom: document object module, 文件物件模型），通俗將就是可以實現從程式設計中更改html中內容的一種介面。
dom元素的操作可以看作一下幾種
dom元素的獲取
動態建立dom元素
// document.createelement();
// var a=document.createelement('title');
// console.log(a); 動態建立乙個title標籤
/*dom元素裡面如何操作子節點*/
var ulitem = document.getelementbyid("item");
/*childelementcount 子節點的個數*/
/*console.log(ulitem.childelementcount);*/
/*for (var i = 0; i < ulitem.childnodes.length; i++) *!/
if (ulitem.childnodes[i].nodename == "li")
}*//*firstchild lastchild*/
console.log(ulitem.children);
/*找父元素裡面的 子節點 有兩個屬性 childnodes 返回的是所有的節點 children 返回的是元素節點*/
console.log(ulitem.firstchild); //輸出第乙個回車
console.log(ulitem.firstelementchild);
/*找元素的父級元素*/
var lidata=document.getelementbyid("lilist");
/*console.log(lidata.parentnode);*/
/*console.log(lidata.parent); 無效*/
/*console.log(lidata.parentelement);*/
/*找元素的同胞兄弟*/
/*console.log(lidata.nextsibling);
console.log(lidata.nextelementsibling);*/
/*console.log(lidata.previouselementsibling);
console.log(lidata.previoussibling);*/
// 3.給元素設定屬性
// 1.給元素設定自定義屬性
// var obj=document.createelement('div');
// obj.setattribute('data-name','123456');
// console.log(obj);//給obj 物件設定了乙個自定義屬性 data-name 值為 123456
// 2.對內建屬性的操作
var obj=document.createelement('div');
obj.style.backgroundcolor='red';
obj.style.width='200px';
obj.style.height='100px';
// console.log(obj);
//3.操作屬性、、對一部分的標籤適用或部分功能部分適用
// var obj=document.createelement('div');
// obj.width='100px';
// obj.classname='block box'//兩個class 名字
// console.log(obj);
// 4.自定義屬性的獲取
var obj=document.createelement('div');
obj.setattribute('data-name','123456');
console.log(obj);//給obj 物件設定了乙個自定義屬性 data-name 值為 123456
console.log(obj.getattribute('data-name'));
// 4.dom元素的追加 document.write() .innerhtml .innertext
var obj=document.createelement('div');
obj.style.backgroundcolor='red';
obj.style.width='200px';
obj.style.height='100px';
// document.body.innerhtml=obj;//不行
// document.body.innertext=obj;//不行
// document.write(obj);//不行
// 2.insertbefore()//將新元素新增到舊元素之前
var ele=document.getelementsbyclassname('b')[0];
document.body.insertbefore(obj,ele);//obj 為新元素
DOM方式操作元素屬性
原生js取屬性值getattribute var optionsjson this.getattribute data options 1.獲取 getattribute 名稱 2.設定 setattribute 名稱，值 3.刪除 removeattribute 名稱 用classname選擇元素...
DOM元素的操作
dom元素的操作有動態建立dom元素，子父元素操作，dom元素追加，屬性設定等等.前面詳細的總結了dom元素的獲取方式，這裡複習總結一下下.使用createelement 方法建立元素 語法 document.createelement nodename 引數 nodename 引數描述 必須。建立...
Dom元素操作
把建立的p元素新增到父元素box裡 btn1.onclick function 移除父元素裡的p元素 插入元素 insertbefore 被插入的元素，參照元素 var dom document.getelementbyid dom var newdom document.createelement...