事例詳解DOM的基本方法

2021-06-09 04:41:48 字數 2594 閱讀 2476

一.直接引用結點

1.document.getelementbyid(id);

--在文件裡面通過id來找結點

2.document.getelementbytagname(tagname);

--返回乙個陣列,包含對這些結點的引用

--如:document.getelementbytagname("span");將返回所有型別為span的結點

二.間接引用結點

3.element.childnodes

--返回element的所有子結點,可以用element.childnodes[i]的方式來呼叫

--element.firstchild=element.childnodes[0];

--element.lastchild=element.childnodes[element.childnonts.length-1];

4.element.parentnode

--引用父結點

5.element.nextsibling;   //引用下乙個兄弟結點

element.previoussibling;  //引用上乙個兄弟結點

三.獲得結點資訊

6.nodename屬性獲得結點名稱

--對於元素結點返回的是標記名稱,如:返回的是"a"

--對於屬性結點返回的是屬性名稱,如:class="test" 返回的是test

--對於文字結點返回的是文字的內容

7.nodetype返回結點的型別

--元素結點返回1

--屬性結點返回2

--文字結點返回3

8.nodevalue返回結點的值

--元素結點返回null

--屬性結點返回undefined

--文字結點返回文字內容

9.haschildnodes()判斷是否有子結點

10.tagname屬性返回元素的標記名稱

--這個屬性只有元素結點才有,等同於元素結點的nodename屬性

四.處理屬性結點

11.每個屬性結點都是元素結點的乙個屬性,可以通過(元素結點.屬性名稱)訪問

12.利用setattribute()方法給元素結點新增屬性

--elementnode.setattribute(attributename,attributevalue);

--attributename為屬性的名稱,attributevalue為屬性的值

13.使用getattribute()方法獲得屬性值

--elementnode.getattribute(attributename);

五.處理文字結點

14.innerhtml和innertext屬性,這兩個方法相信大家都很熟悉,不介紹了,值得注意的是無論是ie還是firefox都容易把空格、換行、製表符等當成文字結點。所有一般通過element.childnodes[i]引用文字結點的時候,一般要處理:

六.改變文件的層次結構

15.document.createelement()方法建立元素結點

--如:document.createelement("span");

16.document.createtextnode()方法建立文字結點

--如:document.createtextnode(" "); //注:他不會通過html編碼,也就是說這裡建立的不是空格,而是字串 

18.使用insertbefore()方法插入子節點

--parentnode.insertbefore(newnode,referencenode);

--newnode為插入的節點,referencenode為將插入的節點插入到這之前

19.使用replacechild方法取代子結點

--parentnode.replacechild(newnode,oldnode);

--注:oldnode必須是parentnode的子結點,

20.使用clonenode方法複製結點

--node.clonenode(includechildren);

--includechildren為bool,表示是否複製其子結點

21.使用removechild方法刪除子結點

--parentnode.removechild(childnode);

七.**的操作

--注:ie中無法直接將乙個完整的**結點插入到文件中

22.新增行和單元格

var _table=document.createelement("table");   //建立表

table.insertrow(i);//在table的第i行插入行

row.insertcell(i);//在row的第i個位置插入單元格

23.引用單元格物件

--table.rows[i].cells[i];

24.刪除行和單元格

--table.deleterow(index);

--row.deletecell(index);

25.交換兩行獲得兩個單元格的位置

node1.swapnode(node2);

--這個方法在firefox中將出錯

通用方法:

function swapnode(node1,node2)

DOM節點基本方法和屬性

1 dom document object model 是由w3c規範 已接觸標準組織 ecma w3c 已經到dom4了 dom.0是出現規範之前的方法 兩大陣營 支援 dom瀏覽器 chrome opera firefox safari 2 節點 node 1 tree 常用節點型別 元素節點 ...

JS文件物件模型 DOM 的基本方法

一.直接引用結點 1.document.getelementbyid id 在文件裡面通過id來找結點 2.document.getelementbytagname tagname 返回乙個陣列,包含對這些結點的引用 如 document.getelementbytagname span 將返回所有...

DOM的基本操作

dom是針對於html和xml文件的乙個api 應用程式程式設計介面 是w3c組織推薦的處理可擴充套件標誌語言的標準程式設計介面。在網頁上,組織頁面 或文件 的物件被組織在乙個樹形結構中,用來表示文件中物件的標準模型就稱為dom。當網頁被載入時,瀏覽器會建立頁面的文件物件模型 在dom中,可以將任何...