【JavaScript實用技巧（二）】Js操作DOM（由問題引發的文章改版，新人大佬都可）

歸子莫發表於2021-11-12
JavaScriptJS

【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/j...

image-20211103000848461

通過這個物件模型，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>

效果：

image-20211112224558322

程式碼解析：

通過getElementById獲取元素id為test的節點，然後列印test節點的文字。

下圖就是獲取的html節點

image-20211112224836440

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>

效果：

image-20211112225919073

程式碼解析：

通過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>

效果：

image-20211112232023788

刪除節點

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>

效果：

image-20211112232536199

複製節點（克隆節點）

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>

效果：

image-20211112233203894

設定節點的屬性

主要也是獲取，修改和刪除

獲取節點的屬性值
元素節點.屬性;
元素節點[屬性];

節點.getAttribute("屬性名稱");

前者是直接操作標籤，後者是把標籤作為DOM節點。

設定節點的屬性值
myNode.src = "xxxx"   //修改src的屬性值
myNode.className = "xxxx";  //修改class的name
    
元素節點.setAttribute(屬性名, 新的屬性值);

前者是直接操作標籤，後者是把標籤作為DOM節點。

刪除節點的屬性
元素節點.removeAttribute(屬性名);
總結

推薦使用DOM節點，不要直接操作標籤。

感謝

萬能的網路

菜鳥教程

以及勤勞的自己，個人部落格，GitHub測試，GitHub

公眾號-歸子莫，小程式-小歸部落格

相關文章