DOM操作在JS中可以說是非常常見了吧，很多網(wǎng)頁的小功能的實(shí)現(xiàn)，比如一些元素的增刪操作等都可以用JS來實(shí)現(xiàn)。那么在DOM中我們需要知道些什么才能完成一些功能的實(shí)現(xiàn)呢？今天這篇文章就先簡單的帶大家入一下JS中DOM操作的門吧??！

一、DOM樹的節(jié)點(diǎn)

1、 DOM節(jié)點(diǎn)分為三大類: 元素節(jié)點(diǎn)(標(biāo)簽節(jié)點(diǎn))、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)。

屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)都屬于元素節(jié)點(diǎn)的子節(jié)點(diǎn)。 因此操作時(shí)，需先選中元素節(jié)點(diǎn)，再修改屬性和文本。

【查看元素節(jié)點(diǎn)】

1、 使用getElement系列方法：

具體的HTML代碼如下圖：

//通過ID來查看元素屬性
var li = document.getElementById("first"); 
//通過類名來查看元素屬性
var lis1 = document.getElementsByClassName("cls");
//通過名字來查看元素屬性
var lis2 = document.getElementsByName("name");
//通過標(biāo)簽名來查看元素屬性
var lis3 = document.getElementsByTagName("li");

注意事項(xiàng)：

① ID不能重名，如果ID重復(fù)，只能取到第一個(gè)。

② 獲取元素節(jié)點(diǎn)時(shí)，必須等到DOM樹加載完成后才能獲取。

兩種處理方式：

a.將JS寫在文檔最后；

b.將代碼寫入window.onload函數(shù)中；

③ 通過getElements系列取到的為數(shù)組格式，操作時(shí)必須取到其中的每一個(gè)元素，才能進(jìn)行操作，而不能直接對數(shù)組進(jìn)行操作。

document.getElementsByTagName("li")[0].click = function(){}

④ 這一系列方法，也可以先選中一個(gè)DOM節(jié)點(diǎn)，在從選中的DOM節(jié)點(diǎn)中，選擇需要的節(jié)點(diǎn)：

document.getElementById("div1").getElementsByTagName("li");

【通過querySelector系列方法】

① 傳入一個(gè)選擇器名稱，返回第一個(gè)找到的元素。 通常用于查找ID：

var dq1 = document.querySelector("#id");

② 傳入一個(gè)選擇器名稱，返回所有找到的元素，無論找到幾個(gè)，都返回?cái)?shù)組格式。這種方法比較全能，不管什么屬性都可以準(zhǔn)確地找到。

var dqs1 = document.querySelectorAll("#div1 li");

【查看\設(shè)置屬性節(jié)點(diǎn)】

1、 查看屬性節(jié)點(diǎn)：.getAttribute("屬性名");

2、 設(shè)置屬性節(jié)點(diǎn)：.setAttribute("屬性名","屬性值");

注意事項(xiàng)：.setAttribute() 在老版本IE中會(huì)存在兼容性問題，可以使用.符號(hào)代替。

【JS修改CSS的多種方式】

1、 使用setAttribute設(shè)置class和style。

document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");

2、使用.className添加一個(gè)class選擇器。

document.getElementById("first").className = "class1";

3、 使用.style.樣式 直接修改單個(gè)樣式。 注意樣式名必須使用駝峰命名法。

document.getElementById("first").style.fontSize = "18px";

4、 使用.style 或 .style.cssText 添加一串行級(jí)樣式：

// IE不兼容
document.getElementById("first").style = "color:red;"; 
//所有瀏覽器兼容
document.getElementById("first").style.cssText = "color:red;";

【查看/設(shè)置文本節(jié)點(diǎn)】

1、.innerHTML: 取到或設(shè)置一個(gè)節(jié)點(diǎn)中的HTML代碼。

2、.innerText: 取到或設(shè)置一個(gè)節(jié)點(diǎn)中的文本，不能設(shè)置HTML代碼。

二、層次節(jié)點(diǎn)操作

1. .childNodes： 獲取當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)（包括元素節(jié)點(diǎn)和文本節(jié)點(diǎn)）。

.children： 獲取當(dāng)前節(jié)點(diǎn)的所有元素子節(jié)點(diǎn)（不包含文本節(jié)點(diǎn)）。

2. .parentNode: 獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。

3. .firstChild： 獲取第一個(gè)子節(jié)點(diǎn)，包括回車等文本節(jié)點(diǎn)；

.firstElementChild： 獲取第一個(gè)元素節(jié)點(diǎn)。 不含文本節(jié)點(diǎn)；

.lastChild： 獲取最后一個(gè)子節(jié)點(diǎn)，包括回車等文本節(jié)點(diǎn)；

.lastElementChild： 獲取最后一個(gè)子節(jié)點(diǎn)，不含文本節(jié)點(diǎn)；

4. .previousSibling： 獲取當(dāng)前節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)，包括文本節(jié)點(diǎn)；

.previousElementSibling： 獲取當(dāng)前節(jié)點(diǎn)的前一個(gè)元素兄弟節(jié)點(diǎn)；

.nextSibling：獲取當(dāng)前節(jié)點(diǎn)的后一個(gè)兄弟節(jié)點(diǎn)，包括文本節(jié)點(diǎn)；

.nextElementSibling：獲取當(dāng)前節(jié)點(diǎn)的后一個(gè)元素兄弟節(jié)點(diǎn)；

5. .attributes: 獲取當(dāng)前節(jié)點(diǎn)的所有屬性節(jié)點(diǎn)。 返回?cái)?shù)組格式。

【創(chuàng)建并新增節(jié)點(diǎn)】

1. document.createElement("標(biāo)簽名")： 創(chuàng)建一個(gè)新節(jié)點(diǎn)，并將創(chuàng)建的新節(jié)點(diǎn)返回。

需要配合.setAttribute()為新節(jié)點(diǎn)設(shè)置屬性。

2. 父節(jié)點(diǎn).insertBefore(新節(jié)點(diǎn),目標(biāo)節(jié)點(diǎn))： 在父節(jié)點(diǎn)中，將新節(jié)點(diǎn)插入到目標(biāo)節(jié)點(diǎn)之前。

父節(jié)點(diǎn).appendChild(新節(jié)點(diǎn))： 在父節(jié)點(diǎn)的內(nèi)部最后，插入一個(gè)新節(jié)點(diǎn)。

3. 源節(jié)點(diǎn).cloneNode(true)： 克隆一個(gè)節(jié)點(diǎn)。

傳入true表示克隆源節(jié)點(diǎn)以及源節(jié)點(diǎn)的所有子節(jié)點(diǎn)；

傳入false或不傳，表示只克隆當(dāng)前節(jié)點(diǎn)，而不克隆子節(jié)點(diǎn)。

【刪除、替換節(jié)點(diǎn)】

1. 父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn))： 從父節(jié)點(diǎn)中，刪除指定子節(jié)點(diǎn)。

2. 父節(jié)點(diǎn).replaceChild(新節(jié)點(diǎn),老節(jié)點(diǎn))： 從父節(jié)點(diǎn)中，用新節(jié)點(diǎn)替換老節(jié)點(diǎn)。

最新評論