【JavaScript實用技巧（二）】Js操作DOM（由問題引發的文章改版，新人大佬都可！）
博客說明
文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗匯總，如有什么地方侵權，請聯系本人刪除，謝謝！
說明
這片文章的來源是更改之前的一個筆記，是獲取js獲取input標簽的值，當時只是講了這個例子，當然下面這個例子依然保留，畢竟要在乎老用戶的感受，屬於增量需求。
由當時的一個例子看來，需要總結或者說學習的點還是比較多的。
新人可能只想解決某個問題，而大佬麻煩看看總結的還有哪里需要補充說明的。
js獲取input標簽里面的值
需求
有的時候我們需要獲得在input里面的一些值，比如在發送手機驗證碼的時候，首先在html里面寫以下的代碼
代碼
html 一個簡單的input標簽
<input type="text" name="name" id="phone" />
js 獲取input標簽的值
var phone = document.getElementById("phone").value;
說明
看上面的代碼，就是使用的DOM的API獲取到input標簽的值。既然可以獲取到，那么DOM也提供了相應更改或者說替換的API，而DOM是可以在JS中執行的，那么JS和HTML的交互就來了。
一次勾搭上，那以后的花樣還能少？
所以各種模版引擎，響應式，JS動畫那不就紛至沓來了。
是不是感覺高深的東西就要來了，不急，回到主題，本章主要講JS操作DOM。
JS的能力
在講JS操作DOM的時候，感覺有必要先講一下JS的能力。
下面是對象的 HTML DOM 樹，圖來自W3C，https://www.w3school.com.cn/js/js_htmldom.asp
通過這個對象模型，JavaScript 獲得創建動態 HTML 的所有力量：
- JavaScript 能改變頁面中的所有 HTML 元素
- JavaScript 能改變頁面中的所有 HTML 屬性
- JavaScript 能改變頁面中的所有 CSS 樣式
- JavaScript 能刪除已有的 HTML 元素和屬性
- JavaScript 能添加新的 HTML 元素和屬性
- JavaScript 能對頁面中所有已有的 HTML 事件作出反應
- JavaScript 能在頁面中創建新的 HTML 事件
看到上面的內容，感覺就是會用js，你啥都能做，啥都能改。這種別被產品看到了，不然有些需求你頂不死，推不下。
DOM的了解
既然是JS操作DOM，那么首先是需要熟悉DOM，正好前面寫了一篇關於DOM的文章，【瀏覽器】聊聊DOM
操作DOM的常用方法
| 方法 | 描述 |
|---|---|
| getElementById() | 返回帶有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含帶有指定標簽名稱的所有元素的節點列表（集合/節點數組）。 |
| getElementsByClassName() | 返回包含帶有指定類名的所有元素的節點列表。 |
| appendChild() | 把新的子節點添加到指定節點。 |
| removeChild() | 刪除子節點。 |
| replaceChild() | 替換子節點。 |
| insertBefore() | 在指定的子節點前面插入新的子節點。 |
| createAttribute() | 創建屬性節點。 |
| createElement() | 創建元素節點。 |
| createTextNode() | 創建文本節點。 |
| getAttribute() | 返回指定的屬性值。 |
| setAttribute() | 把指定屬性設置或修改為指定的值。 |
獲取DOM的節點
getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組。
getElementsByClassName()：根據Class屬性值獲取元素對象們。返回值是一個數組。
getElementsByName()：根據name屬性值獲取元素對象們。返回值是一個數組。
獲取Element（節點）的方法最常見的就是以上的四種
getElementById()
根據id屬性值獲取元素對象。id屬性值一般唯一。
如果需要查找文檔中的一個特定的元素，最有效的方法是 getElementById()，在操作文檔的一個特定的元素時，最好給該元素一個 id 屬性（不然你以為為什么叫ById），為它指定一個（在文檔中）唯一的名稱，然后就可以用該 ID 查找想要的元素。
示例：
<html>
<head>
<script type="text/javascript">
function getValue(){
var x = document.getElementById("test")
alert(x.innerHTML)
}
</script>
</head>
<body>
<h1 id="test" onclick="getValue()">我的</h1>
<p>點擊我的，看看效果</p>
</body>
</html>
效果：
代碼解析：
通過getElementById獲取元素id為test的節點，然后打印test節點的文本。
下圖就是獲取的html節點
getElementsByClassName()
getElementsByClassName() 方法返回文檔中所有指定類名的元素集合，作為 NodeList 對象。
NodeList 對象代表一個有順序的節點列表。NodeList 對象 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始)。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試</title>
<style>
.example {
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<div class="example">
<p>我是第一個</p>
</div>
<div class="example color">
<p>我是第二個</p>
</div>
<div class="example color">
<p>我是第三個</p>
</div>
<button onclick="myFunction()">點我看效果</button>
<script>
function myFunction() {
var x = document.getElementsByClassName("color");
x[0].style.backgroundColor = "red";
console.log(x)
}
</script>
</body>
</html>
效果：
代碼解析：
通過getElementsByClassName獲取到class屬性為“color”的對象，結果值NodeList 對象，表示指定類名的元素集合。元素在集合中的順序以其在代碼中的出現次序排序。給第一個設置背景顏色為紅色。
注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法
插入DOM節點
插入節點有兩種方式，它們的含義是不同的。
appendChild()
父節點的最后插入一個新的子節點。
父節點.appendChild(新的子節點);
insertBefore()
- 在參考節點前插入一個新的節點。
- 如果參考節點為null，那么他將在父節點最后插入一個子節點。
父節點.insertBefore(新的子節點,作為參考的子節點);
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<ul id="list">
<li>第一</li>
<li>第二</li>
</ul>
<p id="demo">單擊按鈕將項目添加到列表中</p>
<button onclick="myFunction1()">點我，后面新增</button>
<button onclick="myFunction2()">點我，前面新增</button>
<script>
function myFunction1(){
var node = document.createElement("LI");
var textnode = document.createTextNode("我是新加的");
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
}
function myFunction2(){
var node = document.createElement("LI");
var textnode = document.createTextNode("我是新加的");
node.appendChild(textnode);
var list = document.getElementById("list")
list.insertBefore(node, list.childNodes[0]);
}
</script>
</body>
</html>
效果：
刪除節點
removeChild()
必須要指定是刪除哪個子節點
父節點.removeChild(子節點);
如果需要刪除節點本身
node.parentNode.removeChild(node);
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<ul id="list">
<li>第一</li>
<li>第二</li>
</ul>
<p id="demo">單擊按鈕將項目添加到列表中</p>
<button onclick="myFunction1()">點我，后面新增</button>
<button onclick="myFunction2()">點我，前面新增</button>
<button onclick="myFunction3()">點我，刪除第一個節點</button>
<script>
function myFunction1(){
var node = document.createElement("LI");
var textnode = document.createTextNode("我是新加的");
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
}
function myFunction2(){
var node = document.createElement("LI");
var textnode = document.createTextNode("我是新加的");
node.appendChild(textnode);
var list = document.getElementById("list")
list.insertBefore(node, list.childNodes[0]);
}
function myFunction3(){
var list = document.getElementById("list")
list.removeChild(list.childNodes[0]);
}
</script>
</body>
</html>
效果：
復制節點（克隆節點）
cloneNode()
克隆節點
要復制的節點.cloneNode();
要復制的節點.cloneNode(true);
括號里帶不帶參數，效果是不同的。
- 不帶參數/帶參數false：只復制節點本身，不復制子節點。
- 帶參數true：既復制節點本身，也復制其所有的子節點。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<ul id="list">
<li>第一</li>
<li>第二</li>
</ul>
<button onclick="myFunction()">點我，克隆節點</button>
<script>
function myFunction(){
var itm = document.getElementById("list");
var cln = itm.cloneNode(true);
document.getElementById("list").appendChild(cln);
}
</script>
</body>
</html>
效果：
設置節點的屬性
主要也是獲取，修改和刪除
獲取節點的屬性值
元素節點.屬性;
元素節點[屬性];
節點.getAttribute("屬性名稱");
前者是直接操作標簽，后者是把標簽作為DOM節點。
設置節點的屬性值
myNode.src = "xxxx" //修改src的屬性值
myNode.className = "xxxx"; //修改class的name
元素節點.setAttribute(屬性名, 新的屬性值);
前者是直接操作標簽，后者是把標簽作為DOM節點。
刪除節點的屬性
元素節點.removeAttribute(屬性名);
總結
推薦使用DOM節點，不要直接操作標簽。
感謝
萬能的網絡
公眾號-歸子莫，小程序-小歸博客