【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節點,不要直接操作標籤。
感謝
萬能的網路
公眾號-歸子莫,小程式-小歸部落格