一.直接引用結點
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中,可以將任何...