js操作dom節點

2021-06-23 09:07:45 字數 1853 閱讀 5287

1.訪問節點

document.getelementbyid(id);

返回對擁有指定id的第乙個物件進行訪問

document.getelementsbyname(name);

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

注意:elements

document.getelementsbytagname(tagname);

返回帶有指定標籤名的物件集合

注意:elements

document.getelementsbyclassname(classname);

返回帶有指定class名稱的物件集合

注意:elements

2.生成節點

document.createelement(ename);

建立乙個節點

document.createattribute(attrname);

對某個節點建立屬性

document.createtextnode(text);

建立文字節點

3.新增節點

4.複製節點

clonenode(true | false);

複製某個節點

引數:是否複製原節點的所有屬性

5.刪除節點

parentnode.removechild(node)

刪除某個節點的子節點

node是要刪除的節點

注意:ie會忽略節點間生成的空白文字節點(例如,換行符號),而mozilla不會這樣做。在刪除指定節點的時候不會出錯,但是如果要刪除最後乙個子結點或者是第乙個子結點的時候,就會出現問題。這時候,就需要用乙個函式來判斷首個子結點的節點型別。

元素節點的節點型別是 1,因此如果首個子節點不是乙個元素節點,它就會移至下乙個節點,然後繼續檢查此節點是否為元素節點。整個過程會一直持續到首個元素子節點被找到為止。通過這個方法,我們就可以在 internet explorer 和 mozilla 得到正確的方法。

6.修改文字節點

getattribute(name)

通過屬性名稱獲取某個節點屬性的值

setattribute(name,value);

修改某個節點屬性的值

removeattribute(name)

刪除某個屬性

8.查詢節點

parentobj.firstchild

如果節點為已知節點的第乙個子節點就可以使用這個方法。此方法可以遞迴進行使用

parentobj.firstchild.firstchild.....

parentobj.lastchild

獲得乙個節點的最後乙個節點,與firstchild一樣也可以進行遞迴使用

parentobj.lastchild.lastchild.....

parentobj.childnodes

獲得節點的所有子節點,然後通過迴圈和索引找到目標節點

9.獲取相鄰的節點

nebornode.previoussibling :獲取已知節點的相鄰的上乙個節點

nerbournode.nextslbling: 獲取已知節點的下乙個節點

10.獲取父節點

childnode.parentnode:得到已知節點的父節點

11替換節點 方法replace(new,old)

hello world!

原文出處:

js操作dom節點

1.訪問節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意 elements document.getelementsbytagname tagname ...

js獲取節點 dom操作

介面 nodetype常量 nodetype值 備註element node.element node 元素節點 text node.text node 文字節點 document node.document node document comment node.comment node 注釋的文字...

js獲取節點 dom操作

介面 nodetype常量 nodetype值 備註element node.element node 元素節點 text node.text node 文字節點 document node.document node document comment node.comment node 注釋的文字...