1.dom — > document object model
2.dom定義了表示和修改文件所需的物件、這些物件的行為和屬性以及這些物件之間的關係。dom物件即為宿主物件,由瀏覽器廠商定義,用來操作html和css功能的一類物件的集合。也有人稱dom是對html以及xml的標準程式設計介面。
1.對節點的增刪改查
查檢視元素節點
document代表整個文件
document.getelementbyid() //元素id 在ie8以下的瀏覽器,不區分id大小寫,而且也返回匹配name屬性的元素
.getelementsbytagname() // 標籤名
.getelementsbyname(); //,ie不支援需注意,只有部分標籤name可生效(表單,表單元素,img,iframe)
.getelementsbyclassname() // 類名 -> ie8和ie8以下的ie版本中沒有,可以多個class一起
.queryselector() // css選擇器 在ie7和ie7以下的版本中沒有
.queryselectorall() // css選擇器 在ie7和ie7以下的版本中沒有
1.getelementbyid方法定義在document.prototype上,即element節點上不能使用。
2.getelementsbyname方法定義在htmldocument.prototype上,即非html中的document以外不能使用(xml document,element)
3.getelementsbytagname方法定義在document.prototype 和 element.prototype上
4.htmldocument.prototype定義了一些常用的屬性,body,head,分別指代html文件中的標籤。
5.document.prototype上定義了documentelement屬性,指代文件的根元素,在html文件中,他總是指代元素
6.getelementsbyclassname、queryselectorall、queryselector在document,element類中均有定義
遍歷節點樹:
parentnode -> 父節點 (最頂端的parentnode為#document);
childnodes -> 子節點們
firstchild -> 第乙個子節點
lastchild -> 最後乙個子節點
nextsibling->後乙個兄弟節點 previoussibling->前乙個兄弟節點
基於元素節點樹的遍歷
parentelement -> 返回當前元素的父元素節點 (ie不相容)
children -> 只返回當前元素的元素子節點
node.childelementcount === node.children.length當前元素節點的子元素節點個數(ie不相容)
firstelementchild -> 返回的是第乙個元素節點(ie不相容)
lastelementchild -> 返回的是最後乙個元素節點(ie不相容)
nextelementsibling / previouselementsibling ->返回後乙個/前乙個兄弟元素節點(ie不相容)
節點的型別
元素節點 —— 1
屬性節點 —— 2
文字節點 —— 3
注釋節點 —— 8
document —— 9
documentfragment —— 11
獲取節點型別 nodetype
節點的四個屬性
nodename
元素的標籤名,以大寫形式表示,唯讀
nodevalue
text節點或comment節點的文字內容,可讀寫
nodetype
該節點的型別,唯讀
attributes
element 節點的屬性集合
節點的乙個方法 node.haschildnodes();
DOM基礎操作
常用方法 3.1 移除所有子節點 removechild 3.2 根據新內容建立新的文字節點 createtextnode 3.3 把新建立的文字子節點附加在節點下 3.4 示例 1 var node document.getelementbyid id 2 獲取節點賦給 node34 移除所有子節...
操作DOM元素 1
js操作dom元素 的編寫 dom樹 傳統的html文件順序是 document html head,body 根據 dom,html 文件中的每個成分都是乙個節點。整個文件是乙個文件節點 每個 html 標籤是乙個元素節點 包含在 html 元素中的文字是文字節點 每乙個 html 屬性是乙個屬性...
jQuery基礎 DOM節點操作
如 p id name a href p 增加環繞節點 方法說明 wrap 用指定結構的元素包裹元素 wrapall 用指定結構的元素包裹多個元素 wrapinner 用指定結構元素包裹元素的內容 節點內部插入 方法說明 向每個匹配元素內部的最後面新增元素 將所有匹配的元素追加到指定的元素中 pre...