DOM 操作

本文轉載自查看原文 2021-09-25 22:46 124 JavaScript

2.DOM 操作

本篇的主要內容如下：

DOM 獲取
添加元素
修改元素
刪除元素
Web Storage
定時任務和延時操作

DOM 獲取

文檔對象模型簡稱 DOM，DOM 是一種 HTML/XHTML 頁面的編程接口(API)。它提供了一種文檔的結構化地圖，還有一組方法，以便與所含元素交互。實際上，它是把標記方式轉換為 JavaScript 可以理解的格式。簡單的說，DOM 就像頁面上所有元素的一個地圖。Web 前端開發者可以使用它通過名字和元素來找到元素，然后添加、修改或刪除元素及其內容。

1.獲取 HTML 元素

在 DOM 中有三種方法能夠獲取元素節點，分別是通過元素 ID、通過標簽名稱和通過類名稱來進行獲取。

①getElementById

DOM 提供了一個名為 getElementByld 的方法，這個方法將返回一個有着給定 id 屬性值的元素節點對應的對象，其使用方法如下所示：

var elementById = document.getElementById(`test_id`);

這個調用將返回一個對象，這個對象對應着 document 對象里的一個獨一無二的元素，即元素 id 屬性值為 test_id 的節點對象。可以通過使用 typeof 操作符來驗證這一點， typeof 操作符能夠定義操作數是一個字符串、數值、函數、布爾值還是對象。 innerText 表示節點內部的文本內容。

console.info(typeof elementById)
console.info(elementById.innerText)

②getElementsByTagName

getElementsByTagName 方法返回一個對象數組，每個對象分別對應着文檔里有着給定標簽的一個元素。類似於 getElementByld，這個方法也是只有一個參數的函數，它的參數是標簽的名字，其使用方法如下所示：

var elementsByTagName = document.getElementsByTagName(`div`);

它與 getElementById 方法有許多相似之處，但它返回的是一個數組，在編寫腳本的時候要注意區分開來。這個數組里的每一個元素都是一個對象，可以使用 getElementsByTagName 方法結合循環語句與 typeof 操作符進行驗證，其使用方法如下所示：

<body>
<div>張三</div>
<div>李四</div>
<div>王二</div>
<script>
    var elementsByTagName = document.getElementsByTagName(`div`);
    for (var i = 0; i < elementsByTagName.length; i++) {
        console.info(elementsByTagName[i].innerText)
    }
</script>
</body>

注意：即使在整個文檔中這個標簽只有一個元素，getElementsByTagName 方法返回的也是一個數組，只是這個數組的長度為 1。

getElementsByTagName 方法允許把一個通配符作為它的參數，而這意味着文檔里的每個元素都將在這個函數所返回的數組里占有一席之地。通配符“*”必須放在引號里面，這是為了讓通配符與乘法操作符有所區別。下面的代碼可以得到文檔中總共有多少個元素節點。

document.getElementsByTagName(`*`);

當然，還可以將 getElementsByTagName 與 getElementByld 結合起來使用，比如想要得到某個 id 屬性值為 my_id 的元素包含多少個列表項，其實現代碼如下所示：

<body>
<div id="my_id">
    <div>張三</div>
    <div>李四</div>
</div>
<div>王二</div>
<script>
    var elementById = document.getElementById("my_id");
    var elementsByTagName = elementById.getElementsByTagName("div");
    for (var i = 0; i < elementsByTagName.length; i++) {
        console.info(elementsByTagName[i].innerHTML)
    }
</script>
</body>

③getElementsByClassName

HTML5 DOM 中新增了一個方法：getElementsByClassName。這個方法能夠通過 class 屬性中的類名來訪問元素。不過由於這是一個新增方法，某些瀏覽器中可能還未支持此方法的解析，其在 Internet Explorer 5/6/7/8 中無效，因此在使用時要注意兼容性。getElementsByClassName 方法與 getElementsByTagName 方法相似，也只接受一個參數，就是類名，其使用方法如下所示：

<body>
<div class="my_class">1</div>
<div class="my_class">2</div>
<div class="my_class">3</div>
<script>
    var elementsByClassName = document.getElementsByClassName("my_class");
    for (var i = 0; i < elementsByClassName.length; i++) {
        alert(elementsByClassName[i].innerHTML)
    }
</script>
</body>

返回值與 getElementsByTagName 方法的返回值類似，都是一個具有相同類名的元素的數組。

getElementsByClassName 方法還可查找那些帶有多個類名的元素。如果要指定多個類名只需在字符串參數中用空格分隔開類名即可，使用方法如下所示：

<div class="my_class">1</div>
<div class="my_class1 my_class">2</div>
<div class="my_class">3</div>
<script>
    var elementsByClassName = document.getElementsByClassName("my_class my_class1");
    for (var i = 0; i < elementsByClassName.length; i++) {
        alert(elementsByClassName[i].innerHTML)
    }
</script>

注意：由於文檔是從上往下在瀏覽器中加載，如果獲取節點的代碼寫在節點之前，則無法正常獲取該節點返回 null 對象。需要指定在頁面加載完成后再獲取節點。

<script>
    window.onload = function () {//頁面加載完成后執行
        let dom = document.getElementById("my_id");
        console.info(dom)
    }
</script>

添加元素

如果需要向 HTML 中添加新元素，那么首先便需要創建該元素，然后向已存在的元素追加創建的新元素。

document.createElement() 方法用來創建新的 Element 節點和 Text 節點，而方法 node.appendChild() 可以用來將創建好的元素添加到一個文檔，其具體實現方法如下。

<div id="my_div">
</div>
<script>
    var element = document.createElement("p");
    element.append("這是段落");
    document.getElementById("my_div").appendChild(element);
</script>

練習：大寫字母排版：將 css 篇的 display 練習使用循環輸出 A-Z 全部字符。

參考代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒子和邊練習</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    #content {
        margin: 10px auto;
        border: 2px dotted #000000;
        width: 600px;
        display: table;
    }

    #content div {
        background: #907e35;
        display: inline-block;
        width: 180px;
        height: 180px;
        margin: 10px;
        text-align: center;
        color: white;
        line-height: 180px;
        font-size: 100px;
    }
&lt;/style&gt;

</head>
<body>
 <div id="content">
 </div>
 <script>
 for (let i = 65; i < 91; i++) {
 let element = document.createElement("div");
 element.append(String.fromCharCode(i));
 document.getElementById("content").appendChild(element);
 }
 </script>
 </body>
 </html>

修改元素

修改元素包含三個部分的內容：修改元素內容、修改元素屬性和修改元素樣式。

①修改元素的內容

修改元素內容的最簡單方法便是使用 innerHTML 屬性，使用該屬性可以對元素的內容重新賦值，從而達到修改元素內容的效果，其使用方法如下所示：

document.getElementById("my_div").innerHTML = "<p>這是一個段落</p>";

②修改元素屬性

在得到需要的元素以后，就可以設法獲取它的各個屬性，getAttribute() 方法就是專門用來獲取元素屬性的，相應的也可以使用 setAttribute() 方法來更改元素節點的屬性值。

案例：

<div id="my_div" title="哈哈哈"></div>

<script>

alert(document.getElementById("my_div").getAttribute("title"));

</script>

setAttribute() 方法是用來設置屬性的,它允許對屬性節點的值做出修改，與getAtribute方法一樣,
它也是只能用於元素節點，其使用方法如下所示:

object.setAttribute(attribute,value);

案例：

<div id="my_div" title="哈哈哈">

div

</div>

<script>

document.getElementById("my_div").setAttribute("title","嘻嘻嘻")

</script>

③修改元素的樣式

<p id="p2">Hello World!</p>

<script>

document.getElementById("p2").style.color="blue";

</script>

練習：

1.使用三個按鈕控制 HTML 文檔的 body 的背景顏色。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>盒子和邊練習</title>

<style>

* {

padding: 0;

margin: 0;

}
    body {
        background-color: dodgerblue;
    }

    .btn-group {
        position: fixed;
        bottom: 0;
        text-align: center;
        width: 100%;
    }

    .btn-group button {
        width: 150px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border: none;
        font-size: 25px;
    }
&lt;/style&gt;

</head>
<body>
 <div class="btn-group">
 <button onclick="changeColor('dodgerblue')">dodgerblue</button>
 <button onclick="changeColor('purple')">purple</button>
 <button onclick="changeColor('gray')">gray</button>
 </div>
 <script>
 function changeColor(str) {
 document.body.style.backgroundColor = str;
 }
 </script>
 </body>
 </html>

刪除元素

如果需要在 HTML 中刪除元素，首先便需要獲得該元素，然后得到該元素的父元素，最后通過
removeChild 方法刪除該元素，其實現流程如下。

var child = document.getElementById("p1");

child.parentNode.removeChild(child);

案例：

<div>

<p>不被刪除的節點</p>

<p id="p1">要被刪除的節點</p>

</div>

<script>

var child = document.getElementById("p1");

child.parentNode.removeChild(child);

</script>

練習：

1.表格指定刪除：排版如下表格，並增加刪除按鈕，在點擊刪除按鈕時能正常刪除該條數據。

參考代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>表格指定刪除</title>

<style>

* {

padding: 0;

margin: 0;

}
    table {
        width: 600px;
        margin: 20px auto;
        border-collapse: collapse;
        text-align: center;
    }

    table td, table th {
        border: 1px solid #cad9ea;
        color: #666;
        height: 30px;
    }

    table thead th {
        background-color: #CCE8EB;
        width: 100px;
    }

    table tr:nth-child(odd) {
        background: #fff;
    }

    table tr:nth-child(even) {
        background: #F5FAFA;
    }
&lt;/style&gt;

</head>
<body>
 <table border="1" cellspacing="0">
 <thead>
 <tr>
 <th>ID</th>
 <th>姓名</th>
 <th>工資</th>
 <th>操作</th>
 </tr>
 </thead>
 <tbody id="tableData">
 <tr>
 <td>1</td>
 <td>張三</td>
 <td>3000</td>
 <td>
 <button onclick="deleteUser(this)">刪除</button>
 </td>
 </tr>
 <tr>
 <td>2</td>
 <td>李四</td>
 <td>4000</td>
 <td>
 <button onclick="deleteUser(this)">刪除</button>
 </td>
 </tr>
 <tr>
 <td>3</td>
 <td>王二</td>
 <td>3500</td>
 <td>
 <button onclick="deleteUser(this)">刪除</button>
 </td>
 </tr>
 <tr>
 <td>4</td>
 <td>麻子</td>
 <td>3800</td>
 <td>
 <button onclick="deleteUser(this)">刪除</button>
 </td>
 </tr>
&lt;/tbody&gt;

</table>
 <script>
 function deleteUser(obj) {
 //obj.parentNode.parentNode.remove();
 let tr = obj.parentNode.parentNode;
 let tab = document.getElementById("tableData")
 tab.removeChild(tr);
 }
 </script>
 </body>
 </html>

Web Storage

Web Storage 是 HTML5 改良了 Cookie 存儲機制后，新推出的本地存儲機制，其作用是把網站中有用的信息存儲到本地，然后根據實際需要從本地讀取信息，主要分為 SessionStorage 和 LocalStorage 兩種類型，其功能和用法基本上是相同的，只是保存數據的生存期限不同。SessionStorage 內容只存在瀏覽器關閉之前，瀏覽器一旦關閉則數據全部清空，而 localStorage 可以保存在瀏覽器關閉並重啟后還存在。

Storage 對象在創建時會有一個相應的(key/value)鍵/值對列表可供訪問，列表中的每一個鍵/值對稱為數據項。Key 可以是任何字符串，Value 是簡單的字符串。Storage 對象的屬性和方法具體如下：

①length：返回當前 Storage 對象里保存的鍵/值對數量。

②key(index)：該方法返回 Storage 中第 index 個鍵(key)的名稱。鍵的順序是由瀏覽器定義的，只要鍵的數量不改變，鍵的順序也是不變的(添加或刪除鍵會改變鍵的順序，而僅僅改變已存在鍵對應的值不會改變鍵的順序)。如果 index 大於等於鍵/值對的數量，則該方法返回值為空。

③getItem(key)：該方法返回指定 key 對應的當前值。如果指定的 key 在當前 Storage 對象的鍵/值對列表中不存在，則該方法返回值為空。

④setItem(key,value)：該方法首先檢測指定的鍵/值對的鍵是否已存在於當前鍵值對列表。如果不存在，就把該鍵/值對添加到對象鍵/值對列表;如果存在，則進一步判斷舊值與新值是否相等，如果不等，則用新值更新舊值，如果相等，則不做任何改變。

⑤removeItem(key)：該方法從 Storage 對象鍵/值對列表中刪除指定鍵對應的數據項。key 對應的數據項不存在時不做任何改變。

⑥clear()：當前Storage對象鍵/值對列表中有數據項時，清空鍵/值對列表。對於空的鍵值對列表，不做任何改變。

localStorage.setItem("key",1);

var key = localStorage.getItem("key");

也可以簡寫為

localStorage.key=1;

var key = localStorage.key;

案例：

<div id="my_div">

<p>不被刪除的節點</p>

<p id="p1">要被刪除的節點</p>

<button onclick="deleteNode()">刪除</button>

<button onclick="addNode()">添加</button>

</div>

<script>

if (localStorage.getItem("deleteP1")=="1"){

let child = document.getElementById("p1");

child.parentNode.removeChild(child);

}

function deleteNode() {

let child = document.getElementById("p1");

child.parentNode.removeChild(child);

localStorage.setItem("deleteP1","1")

}

function addNode() {

let child = document.getElementById("my_div");

let element = document.createElement("p");

element.append("要被刪除的節點");

element.setAttribute("id","p1")

child.appendChild(element)

localStorage.setItem("deleteP1","0")

}

</script>

練習：如下計算器，在保證用戶能正常輸入情況下計算器能經得起刷新。

參考代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>章節練習</title>

<style>

* {

margin: 0;

padding: 0;

}
    body {
        background-color: black;
        color: white;
        text-align: center;
    }

    h2 {
        padding: 20px;
    }

    .content {
        width: 400px;
        margin: 10px auto;
        border: white solid 1px;
    }

    .inputBox {
        height: 50px;
        font-size: 30px;
        line-height: 50px;
        text-align: right;
        padding: 10px 10px;
    }

    .buttonGroup button {
        width: 90px;
        height: 90px;
        background-color: white;
        border: none;
        float: left;
        margin: 5px;
        line-height: 90px;
        font-size: 30px;
        border-radius: 4px;
    }

    .cleanFloat {
        clear: left;
        padding: 10px;
    }
&lt;/style&gt;

</head>
<body>
 <div class="content">
 <h2>超級計算器</h2>
 <hr>
 <p class="inputBox" id="inputBox"></p>
 <hr>
 <div class="buttonGroup">
 <button onclick="clearText()">C</button>
 <button onclick="backspace()">←</button>
 <button onclick="addChar('(')">(</button>
 <button onclick="addChar(')')">)</button>
 <button onclick="addChar(7)">7</button>
 <button onclick="addChar(8)">8</button>
 <button onclick="addChar(9)">9</button>
 <button onclick="addChar('/')">/</button>
 <button onclick="addChar(4)">4</button>
 <button onclick="addChar(5)">5</button>
 <button onclick="addChar(6)">6</button>
 <button onclick="addChar('')"></button>
 <button onclick="addChar(1)">1</button>
 <button onclick="addChar(2)">2</button>
 <button onclick="addChar(3)">3</button>
 <button onclick="addChar('-')">-</button>
 <button onclick="addChar(0)">0</button>
 <button onclick="addChar('.')">.</button>
 <button onclick="calculate()">=</button>
 <button onclick="addChar('+')">+</button>
 </div>
 <div class="cleanFloat">
 中國制造
 </div>
 </div>
<script>
 if (localStorage.inputBox) {
 document.getElementById("inputBox").innerText = localStorage.inputBox;
 }
function addChar(c) {
    document.getElementById("inputBox").innerText += c;
    localStorage.inputBox = document.getElementById("inputBox").innerText;
}

function calculate() {
    let str = document.getElementById("inputBox").innerText;
    document.getElementById("inputBox").innerText = eval(str);
    localStorage.inputBox = document.getElementById("inputBox").innerText;
}

function clearText() {
    document.getElementById("inputBox").innerText = "";
    localStorage.clear();
}

function backspace() {
    let str = document.getElementById("inputBox").innerText;
    document.getElementById("inputBox").innerText=str.substr(0, str.length-1);
    localStorage.inputBox = document.getElementById("inputBox").innerText;
}

</script>
 </body>
</html>

定時任務和延時操作

在實際開發中經常使用定時任務和延時操作，JavaScript 提供相應的 API 完成該操作。

定時任務：setInterval

var i = 0;

var id = setInterval(function () {

console.info(i);

i++;

if (i == 8) {

clearInterval(id);

}

}, 1000)

使用 setInterval（function，時間）完成定時任務的開啟，該方法的返回值是一個任務 id 類型為一個數字。使用 clearInterval 清除定時任務。

延時操作：setTimeout

setTimeout(function () {

alert("三秒后彈出")

}, 3000)

使用 setTimeout（function，時間）完成延時操作。和 setInterval 一樣時間的單位是毫秒 1000 毫秒=1秒。

練習：

1.變身小怪獸：創建一個 HTML 頁面上面有一張圖片，“變大”，“變小”，“暫停” 三個按鈕控制圖片大小。當變大按鈕被點擊時，圖片以每秒 30 px 的速度變大，其他按鈕相同道理控制圖片。

參考代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>章節練習</title>

<style>

.btn-group {

position: fixed;

bottom: 0;

text-align: center;

width: 100%;

}
    .btn-group button {
        width: 150px;
        height: 50px;
        background: #1e69e8;
        text-align: center;
        line-height: 50px;
        border: none;
        color: white;
        font-size: 30px;
    }

    img {
        margin: 0 auto;
        display: block;
    }
&lt;/style&gt;

</head>
 <body>
<img src="img/小怪獸.jpg" width="200">
 <div class="btn-group">
 <button onclick="big()">變大</button>
 <button onclick="stop()">停止</button>
 <button onclick="small()">變小</button>
 </div>
<script>
 var index = 0;
function big() {
    if (index == 0) {
        index = setInterval(function () {
            document.getElementsByTagName("img")[0].width += 3;
        }, 100)
    }
}

function small() {
    if (index == 0) {
        index = setInterval(function () {
            document.getElementsByTagName("img")[0].width -= 3;
        }, 100)
    }
}

function stop() {
    clearInterval(index);
    index = 0;
}

</script>
 </body>
 </html>

章節練習：

1.做一個時間實時顯示的頁面。

2.做一個基於內存的用戶系統，在頁面不刷新時，能完成用戶的增刪改查。

3.基於第二題，將對象持久化到瀏覽器緩存，使其在刷新時保持修改的數據不丟失。

參考代碼：

第一題參考代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

body {

background-color: black;

color: white;

font-size: 40px;

text-align: center;

}

p span {

border: 2px solid #333;

padding: 10px 4px;

}

</style>

</head>

<body>

<p id="time">

</p>
<script>
 getTime();
function getTime() {
    let date = new Date();
    let hours = formatTime(date.getHours());
    let minutes = formatTime(date.getMinutes());
    let seconds = formatTime(date.getSeconds());
    document.getElementById('time').innerHTML = hours + " : " + minutes + " : " + seconds;
    setTimeout("getTime()", 500);
}

function formatTime(i) {
    if (i &lt; 10) {
        i = "&lt;span&gt;0&lt;/span&gt; &lt;span&gt;" + i + "&lt;/span&gt;";
    } else {
        let j = i.toString().charAt(0);
        let z = i.toString().charAt(1);
        i = "&lt;span&gt;" + j + "&lt;/span&gt; &lt;span&gt;" + z + "&lt;/span&gt;";
    }
    return i;
}

</script>
 </body>
 </html>

第二、三題參考代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>章節練習</title>

<style>

* {

margin: 0;

padding: 0

}
    table {
        width: 600px;
        margin: 20px auto;
        border-collapse: collapse;
        text-align: center;
    }

    table td, table th {
        border: 1px solid #cad9ea;
        color: #666;
        height: 30px;
    }

    table thead th {
        background-color: #CCE8EB;
        width: 100px;
    }

    table tr:nth-child(odd) {
        background: #fff;
    }

    table tr:nth-child(even) {
        background: #F5FAFA;
    }

    input {
        width: 70px;
    }

    button {
        display: inline-block;
        padding: 4px 8px;
        margin: 0 6px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
        color: #d9eef7;
        border: solid 1px #0076a3;
        background: #0095cd;
    }

&lt;/style&gt;

</head>
 <body>
 <table border="1" cellspacing="0">
 <thead>
 <tr>
 <th>ID</th>
 <th>姓名</th>
 <th>工資</th>
 <th>操作</th>
 </tr>
 </thead>
 <tbody id="tableData">
&lt;/tbody&gt;

</table>
 <script>
 var arr = [
 {id: 1, name: "張三", sal: 3000},
 {id: 2, name: "李四", sal: 4000},
 {id: 3, name: "王二", sal: 3500},
 {id: 4, name: "麻子", sal: 3800}];
 // if (localStorage.userInfo) {
 // arr = JSON.parse(localStorage.userInfo);
 // }
function loadData() {
    // localStorage.userInfo = JSON.stringify(arr);
    var str = "";
    arr.forEach((o, index) =&gt; {
        str += `&lt;tr&gt;&lt;td&gt;${o.id}&lt;/td&gt;&lt;td&gt;${o.name}&lt;/td&gt;&lt;td&gt;${o.sal}&lt;/td&gt;

<td><button onclick="updateUser(${index})">修改</button><button onclick="deleteUser(${index})">刪除</button></td></tr> }) str +=<tr><td><input id="userId"></td><td><input id="userName"></td><td><input id="userSal"></td>
 <td><button onclick="saveData()">保存</button><button onclick="cancel()">取消</button></td></tr>`
 document.getElementById("tableData").innerHTML = str;
 }
loadData();

function deleteUser(index) {
    arr.splice(index, 1);
    loadData();
}

var updateIndex = -1;

function updateUser(index) {
    updateIndex = index;
    document.getElementById("userId").value = arr[index].id;
    document.getElementById("userName").value = arr[index].name;
    document.getElementById("userSal").value = arr[index].sal;
}

function saveData() {

    var id = document.getElementById("userId").value;
    var name = document.getElementById("userName").value;
    var sal = document.getElementById("userSal").value;
    if (updateIndex == -1) {
        arr.push({id: id, name: name, sal: sal})
    } else {
        arr.forEach(o =&gt; {
            if (o.id == id) {
                o.name = name;
                o.sal = sal;
            }
        })
    }

    loadData();        
    updateIndex = -1;
}

function cancel() {
    document.getElementById("userId").value = "";
    document.getElementById("userName").value = "";
    document.getElementById("userSal").value = "";
    updateIndex = -1;
}

</script>
 </body>
 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JQ操作DOM react中的DOM操作 javascript_DOM操作 DOM節點操作 python dom操作 Vue對於dom的操作 DOM、Window對象操作 javascript基礎DOM操作 JS核心之DOM操作上 Vue中的DOM操作