DOM物件,控制HTML物件

2021-08-07 08:56:41 字數 3072 閱讀 8984

1.getelementsbyname()方法

返回帶有指定名稱的節點物件的集合。

語法:document.getelementsbyname(name)

注意:(1)因為文件中的name屬性可能不唯一,所有getelementsbyname()方法返回的是元素的陣列,而不是乙個元素。

(2)和陣列類似也有length屬性,可以和訪問陣列一樣的方法來訪問,從0開始。

2.getelementsbytagname()方法

返回帶有指定標籤名的節點物件的集合。返回元素的順序是它們在文件中的順序。

語法:document.getelementbytagname(tagname)

說明:(1)tagname是標籤的名稱,如p、a、img等標籤嗎

(2)和陣列類似也有length屬性,可以和訪問陣列一樣的方法來訪問,所以從0開始。

3.程式

4.getattribute()方法

通過元素節點的屬性名稱獲取屬性的值。

語法:elementnode.getattribute(name)

說明:(1)elementnode:使用getelementbyid()、getelementbytagname()等方法,獲取到的元素節點。

(2)name:要想查詢的元素節點的屬性名字。

5.setattribute()方法

setattribute()方法增加乙個指定名稱和值的新屬性,或者把乙個現有的屬性設定為指定的值。

語法:elementnode.setattribute(name,value);

說明:name:要設定的屬性名  value:要設定的屬性值

6.節點屬性

在文件物件屬性(dom)中,每個節點都是乙個物件,dom節點有三個重要屬性:nodename:節點名稱  nodevalue:節點的值 nodetype:節點的型別

(1)nodename屬性:節點的名稱,是唯讀的。

元素節點的 nodename 與標籤名相同

屬性節點的 nodename 是屬性的名稱

文字節點的 nodename 永遠是 #text

文件節點的 nodename 永遠是 #document

(2)nodevalue()屬性:節點的值

元素節點的 nodevalue 是 undefined 或 null

文字節點的 nodevalue 是文字自身

屬性節點的 nodevalue 是屬性的值

(3)nodetype型別

元素型別    節點型別

元素          1

屬性          2

文字          3

注釋          8

文件          9

7.訪問子節點childnodes

訪問選定元素節點下的所有子節點的列表,返回的值可以看作是乙個陣列它具有length屬性。

8.訪問子節點的第一和最後項

(1)firstchild屬性返回『childnodes』陣列的第乙個節點

語法:node.firstchild

(2)lastchild屬性返回『childnodes』陣列的最後乙個子節點。

語法:node.lastchild

9.訪問父節點parentnode

獲取指定節點的父節點

語法:elementnode.parentnode

注意:父節點只能有乙個

10.訪問兄弟節點

(1)nextsibling 屬性可返回某個節點之後緊跟的節點

語法:nodeobject.nextsibling

(2)previoussibling屬性可返回某個節點之前緊跟的節點

語法:nodeobject.previoussibling

在指定節點的最後乙個子節點列表之後新增乙個新的子節點

往ul標籤新增乙個新項php

12.插入節點insertbefore()

insertbefore()方法可在已有的子節點錢插入乙個新的子節點。

語法:insertbefore(newnode,node);

引數:newnode:要插入的新節點 node:指定此節點前插入的節點

13.刪除節點removechild()

removechild()方法從子節點列表中刪除某個節點。如刪除成功,則此方法可返回被刪除的節點,如失敗,則返回null.

語法:nodeobject.removechild(node)

13.替換元素節點replacechild()

replacechild實現子節點的替換,返回被替換物件的引用。

語法:node.replacechild(newcode,oldnew);

14.建立元素節點createelement

createelement()方法可建立元素節點, 此方法可返回乙個element物件。

語法:document.createelement(tagname)

15.建立文字節點createtextnode

createtextnode()方法建立新的文字節點,返回新建立的text節點。

語法:document.createtextnode(data)

DOM物件控制HTML

1.節點相關的操作 getelementbyid getelementbyname getelementsbyclassname getelementsbytagname getattribute 獲取元素屬性 setattribute 設定元素屬性 childnodes 訪問子節點 parentn...

Dom物件,控制html元素

document.getelementsbyname name 返回帶有指定名稱的節點物件的集合。document.getelementsbytagname tagname 返回帶有指定標籤名的節點物件的集合。返回元素的順序是它們在文件中的順序。node.firstchild 返回 childnod...

DOM物件控制HTML無素 詳解3

createelement 方法可建立元素節點。此方法可返回乙個 element 物件。語法 document.createelement tagname 引數 tagname 字串值,這個字串用來指明建立元素的型別。1createtextnode 方法建立新的文字節點,返回新建立的 text 節點...