JS常見的DOM操作API

2021-08-21 19:11:39 字數 4663 閱讀 9489

目錄

幾種物件

node

nodelist

htmlcollection

節點查詢api

節點建立api

createelement

createtextnode

clonenode

createdocumentfragment

節點修改api

insertbefore

removechild

replacechild

節點關係api

父關係api

子關係api

兄弟關係型api

元素屬性型api

setattribute

getattribute

樣式相關api

直接修改元素的樣式

動態新增樣式規則

window.getcomputedstyle

getboundingclientrect

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

node有乙個屬性 nodetype 表示node的型別，它是乙個整數，其數值分別表示相應的node型別，具體如下：

nodelist 物件是乙個節點的集合，一般由 node.childnodes 、 document.getelementsbyname 和 document.queryselectorall 返回的。

不過需要注意， node.childnodes 、 document.getelementsbyname 返回的 nodelist 的結果是實時的（此時跟htmlcollection比較類似），而 document.queryselectorall 返回的結果是固定的，這一點比較特殊。

舉例如下：

var childnodes = document.body.childnodes;console.log(childnodes.length); // 如果假設結果是「2」console.log(childnodes.length); // 此時的輸出是「3」htmlcollection是乙個特殊的nodelist，表示包含了若干元素（元素順序為文件流中的順序）的通用集合，它是實時更新的，當其所包含的元素發生改變時，它會自動更新。另外，它是乙個偽陣列，如果想像陣列一樣操作它們需要像 array.prototype.slice.call(nodelist, 2) 這樣呼叫。

節點建立api主要包括 createelement 、 createtextnode 、 clonenode 和 createdocumentfragment 四個方法。

建立元素：

var elem = document.createelement("div");elem.id = 'test';elem.style = 'color: red';elem.innerhtml = '我是新建立的節點';建立文字節點：

var node = document.createtextnode("我是文字節點");轉殖乙個節點： node.clonenode(true/false) ，它接收乙個bool引數，用來表示是否複製子元素。

var from = document.getelementbyid("test");var clone = from.clonenode(true);clone.id = "test2";轉殖節點並不會轉殖事件，除非事件是用

這種方式繫結的，用 addeventlistener 和 node.οnclick=***; 方式繫結的都不會複製。

本方法用來建立乙個 documentfragment ，也就是文件碎片，它表示一種輕量級的文件，主要是用來儲存臨時節點，大量操作dom時用它可以大大提公升效能。

假設現有一題目，要求給ul新增10000個li，我們先用最簡單的拼接字串的方式來實現：

最後再試試文件碎片的方法，可以預見的是，這種方式肯定比第二種好很多，但是應該沒有第一種快：

節點修改api都具有下面這幾個特點：

不管是新增還是替換節點，如果其原本就在頁面上，那麼原來位置的節點將被移除；

修改之後節點本身繫結的事件不會消失；

這個其實前面已經多次用到了，語法就是：

它會將child追加到parent的子節點的最後面。另外，如果被新增的節點是乙個頁面中存在的節點，則執行後這個節點將會新增到新的位置，其原本所在的位置將移除該節點，也就是說不會同時存在兩個該節點在頁面上，且其事件會保留。

將某個節點插入到另外乙個節點的前面，語法：

parentnode.insertbefore(newnode, refnode);
這個api個人覺得設定的非常不合理，因為插入節點只需要知道newnode和refnode就可以了，parentnode是多餘的，所以jquery封裝的api就比較好：

newnode.insertbefore(refnode); // 如 $("p").insertbefore("#foo");
所以切記不要把這個原生api和jquery的api使用方法搞混了！為了加深理解，這裡寫乙個簡單的例子：

我是父節點我是舊的子節點

關於第二個引數：

removechild用於刪除指定的子節點並返回子節點，語法：

var deletedchild = parent.removechild(node);
function removenode(node)replacechild用於將乙個節點替換另乙個節點，語法：

parent.replacechild(newchild, oldchild);
dom中的節點相互之間存在著各種各樣的關係，如父子關係，兄弟關係等。

給元素設定屬性：

element.setattribute(name, value);
其中name是特性名，value是特性值。如果元素不包含該特性，則會建立該特性並賦值。

getattribute返回指定的特性名相應的特性值，如果不存在，則返回null：

var value = element.getattribute("id");
elem.style.color = 'red';elem.style.setproperty('font-size', '16px');elem.style.removeproperty('color');

var style = document.createelement('style');style.innerhtml = 'body #top:hover';通過 element.sytle.*** 只能獲取到內聯樣式，借助 window.getcomputedstyle 可以獲取應用到元素上的所有樣式，ie8或更低版本不支援此方法。

var style = window.getcomputedstyle(element[, pseudoelt]);
getboundingclientrect 用來返回元素的大小以及相對於瀏覽器可視視窗的位置，用法如下：

var clientrect = element.getboundingclientrect();
clientrect是乙個 domrect 物件，包含width、height、left、top、right、bottom，它是相對於視窗頂部而不是文件頂部，滾動頁面時它們的值是會發生變化的。

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操作API 總結整理

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