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