首頁 > web前端 > js教程 > 主體

如何進行JS內DOM節點使用

php中世界最好的语言
發布: 2018-06-01 14:32:49
原創
1281 人瀏覽過

這次帶給大家怎麼進行JS內DOM節點使用,JS內DOM節點使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

DOM操作在JS中可以說是非常常見了吧,很多網頁的小功能的實現,例如一些元素的增刪操作等都可以用JS來實現。那麼在DOM中我們需要知道些什麼才能完成一些功能的實作呢?今天這篇文章就先簡單的帶大家入一下JS中DOM操作的門吧! !

一、DOM樹的節點

1、 DOM節點分為三大類: 元素節點(標籤節點)、屬性節點、文字節點。

屬性節點和文字節點都屬於元素節點的子節點。因此操作時,需先選取元素節點,再修改屬性和文字。

【查看元素節點】

1、 使用getElement系列方法:

具體的HTML程式碼如下圖:

##

//通过ID来查看元素属性
var li = document.getElementById("first"); 
//通过类名来查看元素属性
var lis1 = document.getElementsByClassName("cls");
//通过名字来查看元素属性
var lis2 = document.getElementsByName("name");
//通过标签名来查看元素属性
var lis3 = document.getElementsByTagName("li");
登入後複製
注意事項:

① ID不能重新命名,如果ID重複,只能取到第一個。

② 取得元素節點時,必須等到DOM樹載入完成後才能取得。

兩種處理方式:

a.將JS寫在文件最後;

#b.將程式碼寫入window.onload函數中;

③ 透過getElements系列取到的為數組格式,操作時必須取到其中的每一個元素,才能進行操作,而不能直接對數組進行操作。

document.getElementsByTagName("li")[0].click = function(){}
登入後複製
④ 這一系列方法,也可以先選取一個DOM節點,在從選取的DOM節點中,選取所需的節點:

document.getElementById("p1").getElementsByTagName("li");
登入後複製
【透過querySelector系列方法】

① 傳入一個選擇器名稱,傳回第一個找到的元素。通常用於查找ID:

var dq1 = document.querySelector("#id");
登入後複製
② 傳入一個選擇器名稱,傳回所有找到的元素,無論找到幾個,都會傳回數組格式。這種方法比較全能,不管什麼屬性都可以準確地找到。

var dqs1 = document.querySelectorAll("#p1 li");
登入後複製
【查看\設定屬性節點】

1、 檢視屬性節點:.getAttribute("屬性名稱");

2、 設定屬性節點:.setAttribute( "屬性名稱","屬性值");

注意事項:.setAttribute() 在舊版IE中會存在相容性問題,可以使用.符號代替。

【JS修改CSS的多種方式】

1、 使用setAttribute設定class和style。

document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");
登入後複製
2、使用.className新增一個class選擇器。

document.getElementById("first").className = "class1";
登入後複製
3、 使用.style.樣式 直接修改單一樣式。注意樣式名稱必須使用駝峰命名法。

document.getElementById("first").style.fontSize = "18px";
登入後複製
4、 使用.style 或.style.cssText 新增一串列級樣式:

// IE不兼容
document.getElementById("first").style = "color:red;"; 
//所有浏览器兼容
document.getElementById("first").style.cssText = "color:red;";
登入後複製
【檢視/設定文字節點】

1、.innerHTML: 取到或設定一個節點中的HTML程式碼。

2、.innerText: 取到或設定一個節點中的文本,不能設定HTML程式碼。

二、層次節點操作

1. .childNodes: 取得目前節點的所有子節點(包括元素節點和文字節點)。

.children: 取得目前節點的所有元素子節點(不包含文字節點)。

2. .parentNode: 取得目前節點的父節點。

3. .firstChild: 取得第一個子節點,包括回車等文字節點;

.firstElementChild: 取得第一個元素節點。不含文字節點;

.lastChild: 取得最後一個子節點,包括回車等文字節點;

.lastElementChild: 取得最後一個子節點,不含文字節點;

4. .previousSibling: 取得目前節點的前一個兄弟節點,包括文字節點;

.previousElementSibling: 取得目前節點的前一個元素兄弟節點;

.nextSibling:取得當前節點的後一個兄弟節點,包括文字節點;

.nextElementSibling:取得目前節點的後一個元素兄弟節點;

5. .attributes: 取得目前節點的所有屬性節點。傳回數組格式。

【建立並新增節點】

1. document.createElement("標籤名稱"): 建立一個新節點,並將建立的新節點傳回。

需要配合.setAttribute()為新節點設定屬性。

2. 父節點.insertBefore(新節點,目標節點): 在父節點中,將新節點插入目標節點之前。

父節點.appendChild(新節點): 在父節點的內部最後,插入一個新節點。

3. 來源節點.cloneNode(true): 複製一個節點。

傳入true表示複製來源節點以及來源節點的所有子節點;

傳入false或不傳,表示只複製目前節點,而不複製子節點。

【刪除、取代節點】

1. 父節點.removeChild(子節點): 從父節點中,移除指定子節點。

2. 父節點.replaceChild(新節點,老節點): 從父節點中,用新節點取代舊節點。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

不用JS實作選單開啟關閉

#怎麼操作vue透過id從清單頁跳轉詳情頁

以上是如何進行JS內DOM節點使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!