JavaScript中操作節點
1、獲取節點
1.1、用 getElement 方法獲取
獲取元素節點時，必須等到DOM樹加載完成后才能獲取。兩種處理方式：（1）將JS寫在文檔最后；（2）將代碼寫入window.onload函數中；
//通過ID來查看元素屬性 var li = document.getElementById("first"); //通過類名來查看元素屬性，返回元素數組 var lis1 = document.getElementsByClassName("cls"); //通過名字來查看元素屬性，返回數組 var lis2 = document.getElementsByName("name"); //通過標簽名來查看元素屬性，返回數組 var lis3 = document.getElementsByTagName("li");
這一系列方法，也可以先選中一個DOM節點，在從選中的DOM節點的子節點里，選擇需要的節點：
document.getElementById("div1").getElementsByTagName("li")[0];
1.2、用 querySelector 方法獲取
querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。
var dq1 = document.querySelector("#id");
querySelectorAll() 方法返回文檔中匹配指定 CSS 選擇器的所有元素，返回 NodeList 對象。
var dqs1 = document.querySelectorAll("#div1 li");
2、查看設置屬性（getAttribute、setAttribute）
attributes: 獲取當前節點的所有屬性節點。 返回數組格式。
document.getElementsByTagName("a")[0].getAttribute("target");
//element.setAttribute("屬性名","屬性值");
document.getElementsByTagName("INPUT")0].setAttribute("type","button");
3、設置樣式
使用setAttribute設置class和style。
document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");
使用 className設置元素類名
document.getElementById("first").className = "class1";
使用 style 樣式 直接修改單個樣式。注意樣式名必須使用駝峰命名法。
document.getElementById("first").style.fontSize = "18px";
使用 style 或 style.cssText 設置樣式：
// IE不兼容 document.getElementById("first").style = "color:red;"; //cssText 屬性用于設置或者返回元素聲明的內聯樣式。 document.getElementById("first").style.cssText = "color:red;";
4、設置文本節點
innerHTML：取到或設置一個節點中的HTML代碼。
innerText：取到或設置一個節點中的文本，會判斷HTML標簽樣式，如果該標簽隱藏，則該標簽文本不會輸出
<div class="container"> aaaa <h1 class="h1 h2">container里的標題1</h1> <h2 style="display: none">隱藏內容</h2> bbbb </div>
let cont = document.getElementsByClassName('container')[0];
console.log(cont.innerHTML);
//輸出：
// aaaa
// <h1 class="h1 h2">container里的標題1</h1>
// <h2 style="display: none">隱藏內容</h2>
// bbbb
console.log(cont.innerText);
//輸出：
//aaaa
//container里的標題1
//bbbb
console.log(cont.textContent);
//輸出：
//aaaa
// container里的標題1
// 隱藏內容
// bbbb
5、父子同胞節點
5.1、關于子節點的操作
childNodes： 獲取當前節點的所有子節點（包括元素節點和文本節點）。
children： 獲取當前節點的所有元素子節點（不包含文本節點）。
firstChild： 獲取第一個子節點，包括回車等文本節點；
firstElementChild： 獲取第一個元素節點。 不含文本節點；
lastChild： 獲取最后一個子節點，包括回車等文本節點；
lastElementChild： 獲取最后一個子節點，不含文本節點；
5.2、關于父節點的操作
parentNode: 獲取當前節點的父節點。
5.3、關于同胞節點的操作
previousSibling： 獲取當前節點的前一個兄弟節點，包括文本節點；
previousElementSibling： 獲取當前節點的前一個元素兄弟節點；
nextSibling：獲取當前節點的后一個兄弟節點，包括文本節點；
nextElementSibling：獲取當前節點的后一個元素兄弟節點；
6、創建新增、刪除替換節點
6.1、創建元素節點
document.createElement("div"); //創建元素節點
6.2、創建文本節點
document.createTextNode(text)
var btn=document.createTextNode("Hello World");
6.3、添加節點
往父節點添加子節點
document.getElementById("myList").appendChild(newItem); //在父節點的末尾添加子節點
document.getElementById("myList").insertBefore(newItem,existingItem); //在父節點中的某一已存子節點前面添加節點 existingItem 是指父節點中已經存在的子節點，插入的新節點就插在這個子節點的位置
6.4、刪除節點
父節點.removeChild(子節點)： 從父節點中，刪除指定子節點。
父節點.replaceChild(新節點,老節點)： 從父節點中，用新節點替換老節點。
浙公網安備 33010602011771號