Dom節點操作常用方法

2022-07-19 01:33:13 字數 2171 閱讀 3694

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.新增節點

document.insertbefore(newnode,referencenode);  //在某個節點前插入節點

4.複製節點

clonenode(true | false);  //複製某個節點  引數:是否複製原節點的所有屬性

5.刪除節點

parentnode.removechild(node);  //刪除某個節點的子節點 node是要刪除的節點

注意:為了保證相容性,要判斷元素節點的節點型別(nodetype),若nodetype==1,再執行刪除操作。通過這個方法,就可以在 ie和 mozilla 完成正確的操作。

nodetype 屬性可返回節點的型別.最重要的節點型別是:

元素型別

節點型別

元素element

1屬性attr

2文字text

3注釋comments

8文件document

96.修改文字節點

方法作用

將data加到文字節點後面

deletedata(start,length);

將從start處刪除length個字元

insertdata(start,data);

在start處插入字元,start的開始值是0;

replacedata(start,length,data);

在start處用data替換length個字元

splitdata(offset);

在offset處分割文字節點

substringdata(start,length);

從start處提取length個字元

7.屬性操作

getattribute(name)    //通過屬性名稱獲取某個節點屬性的值

setattribute(name,value);  //修改某個節點屬性的值

removeattribute(name);  //刪除某個屬性

8.查詢節點

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

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

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

9.獲取相鄰的節點

curtnode.previoussibling;  //獲取已知節點的相鄰的上乙個節點

curtnode.nextslbling;    // 獲取已知節點的下乙個節點

10.獲取父節點

childnode.parentnode;  //得到已知節點的父節點

11.替換節點

replace(newnode,oldnode);

dom節點及對節點的常用操作方法

在說dom節點前,先來看看頁面的呈現 dom渲染流程 1 瀏覽器解析html原始碼,然後建立乙個dom樹。在dom樹中,每乙個html標籤都有乙個對應的節點 元素節點 並且每乙個文字也都有乙個對應的節點 文字節點 dom樹的根節點就是documentelement,對應的是html標籤。2 瀏覽器解...

dom節點及對節點的常用操作方法

dom節點及對節點的常用操作方法 在說dom節點前,先來看看頁面的呈現 dom渲染流程 1 瀏覽器解析html原始碼,然後建立乙個dom樹。在dom樹中,每乙個html標籤都有乙個對應的節點 元素節點 並且每乙個文字也都有乙個對應的節點 文字節點 dom樹的根節點就是documentelement,...

DOM常用操作 元素 節點相關

dom物件的深入理解這篇文章中有提到一些dom操作,我們會在這篇文章中簡單回顧一下。幾個需求 dom元素的增刪改 注意 如果獲取到一組物件,要獲得元素物件需要加相應索引 只有事先寫好了行內樣式才可以獲取和修改,其他設定樣式的方法不可。而且設定之後也只是設定行內樣式 需要提前寫好某個樣式類的css c...