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

歸子莫發表於2021-11-12

【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

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

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

相關文章