自用 DOM基礎操作1

2021-08-20 00:23:43 字數 2852 閱讀 3256

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