建立型api總結
建立型api主要包括createelement
,createtextnode
,clonenode
和createdocumentfragment
四個方法,需要注意下面幾點:
頁面修改型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...