原生js中常用的操作DOM的api介面

2021-09-13 18:08:17 字數 1502 閱讀 3875

建立型api總結

建立型api主要包括createelementcreatetextnodeclonenodecreatedocumentfragment四個方法,需要注意下面幾點:

頁面修改型api要注意幾個特點:

(1)不管是新增還是替換節點,如果新增或替換的節點是原本存在頁面上的,則其原來位置的節點將被移除,也就是說同乙個節點不能存在於頁面的多個位置

(2)節點本身繫結的事件會不會消失,會一直保留著。

節點查詢型api

document.getelementbyid

document.getelementsbytagname

document.getelementsbyname

document.getelementsbyclassname

document.queryselector和document.queryselectorall:通過css選擇器來查詢元素,注意選擇器要符合css選擇器的規則,使用的深度優先搜尋來獲取元素

節點關係型api

1.父關係型api

2.兄弟關係型api

3.子關係型api

元素屬性型api

setattribute:根據名稱和值修改元素的特性eg:element.setattribute(name, value);

getattribute返回指定的特性名相應的特性值,如果不存在,則返回null或空字串.

元素樣式型api

window.getcomputedstyle是用來獲取應用到元素後的樣式,假設某個元素並未設定高度而是通過其內容將其高度撐開,這時候要獲取它的高度就要用到getcomputedstyle,用法如下:

var style = window.getcomputedstyle(element[, pseudoelt]);
element是要獲取的元素,pseudoelt指定乙個偽元素進行匹配。

返回的style是乙個cssstyledeclaration物件。

通過style可以訪問到元素計算後的樣式

getboundingclientrect

getboundingclientrect用來返回元素的大小以及相對於瀏覽器可視視窗的位置,用法如下:

var clientrect = element.getboundingclientrect();
clientrect是乙個domrect物件,包含left,top,right,bottom,它是相對於可視視窗的距離,滾動位置發生改變時,它們的值是會發生變化的。除了ie9以下瀏覽器,還包含元素的height和width等資料,具體可檢視鏈結

JS中常見原生DOM操作API

幾種物件 node node是乙個介面,中文叫節點,很多態別的dom元素都是繼承於它,都共享著相同的基本屬性和方法。常見的node有 element,text,attribute,comment,document 等 所以要注意 節點 和 元素 的區別,元素屬於節點的一種 node有乙個屬性 nod...

JS中常見原生DOM操作API

節點查詢api document.getelementbyid 根據id查詢元素,大小寫敏感,如果有多個結果,只返回第乙個 document.getelementsbyclassname 根據類名查詢元素,多個類名用空格分隔,返回乙個 htmlcollection 注意相容性為ie9 含 另外,不僅...

原生js的dom操作 常用的整理

父節點parentnode 第乙個子節點 只會獲取到元素節點 firstelementchild 第乙個子節點 如果有文字節點將會獲取到文字節點 firstchild 最後乙個節點 只會獲取到元素節點 lastelementchild 最後乙個子節點 如果有文字節點將會獲取到文字節點 lastchi...