如何進行JS內DOM節點使用
- php中世界最好的语言原創
- 2018-06-01 14:32:491297瀏覽
這次帶給大家怎麼進行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內DOM節點使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！