您好,登錄后才能下訂單哦!
DOM操作在JS中可以說(shuō)是非常常見(jiàn)了吧,很多網(wǎng)頁(yè)的小功能的實(shí)現(xiàn),比如一些元素的增刪操作等都可以用JS來(lái)實(shí)現(xiàn)。那么在DOM中我們需要知道些什么才能完成一些功能的實(shí)現(xiàn)呢?今天這篇文章就先簡(jiǎn)單的帶大家入一下JS中DOM操作的門(mén)吧!!
一、DOM樹(shù)的節(jié)點(diǎn)
1、 DOM節(jié)點(diǎn)分為三大類(lèi): 元素節(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代碼如下圖:
//通過(guò)ID來(lái)查看元素屬性 var li = document.getElementById("first"); //通過(guò)類(lèi)名來(lái)查看元素屬性 var lis1 = document.getElementsByClassName("cls"); //通過(guò)名字來(lái)查看元素屬性 var lis2 = document.getElementsByName("name"); //通過(guò)標(biāo)簽名來(lái)查看元素屬性 var lis3 = document.getElementsByTagName("li");
注意事項(xiàng):
① ID不能重名,如果ID重復(fù),只能取到第一個(gè)。
② 獲取元素節(jié)點(diǎn)時(shí),必須等到DOM樹(shù)加載完成后才能獲取。
兩種處理方式:
a.將JS寫(xiě)在文檔最后;
b.將代碼寫(xiě)入window.onload函數(shù)中;
③ 通過(guò)getElements系列取到的為數(shù)組格式,操作時(shí)必須取到其中的每一個(gè)元素,才能進(jìn)行操作,而不能直接對(duì)數(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");
【通過(guò)querySelector系列方法】
① 傳入一個(gè)選擇器名稱(chēng),返回第一個(gè)找到的元素。 通常用于查找ID:
var dq1 = document.querySelector("#id");
② 傳入一個(gè)選擇器名稱(chēng),返回所有找到的元素,無(wú)論找到幾個(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ì)存在兼容性問(wèn)題,可以使用.符號(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),包括回車(chē)等文本節(jié)點(diǎn);
.firstElementChild: 獲取第一個(gè)元素節(jié)點(diǎn)。 不含文本節(jié)點(diǎn);
.lastChild: 獲取最后一個(gè)子節(jié)點(diǎn),包括回車(chē)等文本節(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)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。