dom操作:
node操作
1.document.getelementbyid("id");
2.document.getelementsbyname("name");
3.document.getelementsbytagname("tagname");
4.document.getelementsbyclassname("classname");
5.getattribute("id");
6.setattribute("id","div1");
7.removeattribute("id");
獲取元素標籤:
1.obj.innerhtml
2.obj.outerhtml
獲取元素中的文字:
1.obj.textcontent;
node節點操作
1.document節點
2.元素節點
3.屬性節點
4.文字節點
節點關係:
1.父子關係
2.兄弟關係
節點屬性:
1.節點名稱
obj.nodename
2.節點型別
obj.nodetype
1 元素節點
2 屬性節點
3 文字節點
9 文件節點
3.節點值(key=value結構的才有值)
obj.nodevalue
屬性節點(節點名稱,節點型別=>2,節點值)
文字節點(節點名稱,節點型別=>3,節點值)
元素節點(節點名稱,節點型別=>1)
文件節點(節點名稱=>#document,節點型別=>9)
節點的增、刪、改、查(重點)
節點型別
1.元素節點
2.屬性節點
3.文字節點
4.文件節點 #document 9 null
節點屬性
1.節點名稱-nodename
2.節點型別-nodetype
3.節點值-nodevalue(元素節點沒有)
三種節點和屬性
1.元素節點
1)nodename div
2)nodetype 1
3)nodevalue null
2.屬性節點
1)nodename id
2)nodetype 2
3)nodevalue "div1"
3.文字節點
1)nodename #text
2)nodetype 3
3)nodevalue "aaaaaaaaaaaaa"
查1.獲取元素節點
1).document.getelementbyid("id");
2).document.getelementsbyname("name");
3).document.getelementsbytagname("tagname");
4).document.getelementsbyclassname("classname");
2.獲取屬性節點
1)obj.attributes;
2)obj.getattribute("id");
3.獲取文字節點
1)var obj=document.getelementbyid("div1");
for(var i=0;i}//注意頁面上的回車轉行也算乙個文字節點
4.獲取子節點
1)obj.childnodes; //獲取子節點
5.獲取第乙個子節點
1)obj.firstchild;
6.獲取最後乙個子節點
1)obj.lastchild;
7.獲取父節點
1)nodeobj.parentnode;
8.獲取子元素節點
1)obj.children;
//獲取元素中的子元素物件,不要文字
9.獲取父元素節點
1)obj.parentelement;
//和obj.parentnode相同,獲取同乙個人,是單數
10.獲取前乙個兄弟元素
1)obj.previoussibling;
11.獲取下乙個兄弟元素
1)obj.nextsibling;
增1.增加元素節點
1)var obj=document.getelementbyid("div1");
var obj2=document.createelement("h1");
obj2.id="hid4";
obj2.innerhtml="dddddddddddd";
alert(obj.childnodes.length);
alert(document.body.innerhtml);
"元素標籤");
2)把乙個子節點(new)插入到另外乙個節點(old)之前,父節點.insertbefore(new,old);
var oldobj=document.getelementbyid("div1");
var newobj=document.createelement("h1");
newobj.id="hid4";
newobj.innerhtml="dddddddddddd";
oldobj.parentnode.insertbefore(newobj,oldobj);
2.增加屬性節點
1)obj.setattribute("age","30");
2)attrobj=document.createattribute("age");
attrobj.nodevalue=30;
obj.setattributenode(attrobj);
3.增加文字節點
1)obj.innerhtml="aaaaaa";
2)obj.textcontent="aaaaaa";
3)textobj=document.createtextnode("aaaaaaa");
//追加的文字和前面文字不會合併成乙個
刪1.刪除子節點
parentnode.removechild(x);
2.刪除屬性節點
obj.removeattribute("age")
3.刪除文字節點(文字節點屬於子節點,與刪除子節點方法相同)
parentnode.removechild(x);
改1.修改元素節點
//元素本身是需要修改的,比如修改a標籤本身是沒有意義的,而是修改它身上的屬性和裡面的文字節點
2.修改屬性節點
obj.setattribute("age",40);
3.修改文字節點
1)textobj.nodevalue="bbbbbbbbb";
2)var obj=document.getelementbyid("hid1").childnodes[0];
var str="linux";
obj.insertdata(3,str);
alert(obj.parentnode.childnodes.length);
替換1.替換子節點
父節點.replacechild(newtext,oldtext)
2.替換文字節點
textobj.replacedata(offset,length,str)
轉殖1.複製節點(轉殖元素節點和文字節點)
obj.clonenode();
//預設引數為true,一般情況下把乙個節點放到另的地方去,都是移動,而不是複製,除非用clonenode()方法
obj.clonenode(false);
//只複製元素空架,沒有裡面的子節點
js筆記整理5
dom 文件物件模型 資料結構 線性 單鏈表 迴圈鍊錶 佇列 棧 陣列 樹狀 二叉樹 平衡樹 紅黑樹 網狀 有向圖 無向圖 尋路演算法 a 演算法 dom樹 html檔案對於人來說可以很清楚地看見所有的網頁資料,但是機器並不能看懂。此時就用到了dom樹,轉化為瀏覽器能理解的資料結構,方便查詢 修改 ...
js知識點整理 五
建構函式和原型物件,以及例項之間的關係,建構函式和原型物件,建構函式有個屬性propertype指向原型物件 原型物件有個屬性constructor指向了建構函式 建構函式和原型函式都是唯一的 例項是不唯一的,例項的方法可以從建構函式裡面查詢,找不到就去原型裡面找。原型和構造方法都是唯一的,但是在例...
JS學習筆記 五
js中的物件可以簡單的理解為 名稱 值 對 name value 目錄 1建立物件 1 通過物件字面量的形式建立物件 2 通過new object 建立物件 3 通過建構函式的形式建立物件 4 通過object.create 建立物件 2.獲取物件的屬性.3.新增屬性 4.修改指定屬性 5.通過de...