JS筆記整理 五

2021-06-28 22:47:32 字數 3825 閱讀 1930

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...