Java Script 对Dom的操作_后端返回dom节点前端如何解析-优快云博客

本文链接：https://blog.youkuaiyun.com/SOOOOOF/article/details/124028008

这篇博客详细介绍了DOM操作，包括通过ID、标签和类名获取元素，添加元素，修改元素内容和属性，以及删除元素。此外，还探讨了WebStorage的使用，如SessionStorage和LocalStorage，以及如何设置和获取存储的数据。最后，提到了JavaScript中的定时任务setInterval和延时操作setTimeout。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇的主要内容如下：

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`);<br>

它与 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.innerText ="这是段落";
    document.getElementById("my_div").appendChild(element);
</script>

修改元素

修改元素包含三个部分的内容：修改元素内容、修改元素属性和修改元素样式。

①修改元素的内容

修改元素内容的最简单方法便是使用 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>

删除元素

如果需要在 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>

案例：动态删除

<div>
    <input id="btn1" type="button" value="按钮1" onclick="deleteBtn('btn1')">
    <input id="btn2" type="button" value="按钮2" onclick="deleteBtn('btn2')">
    <input id="btn3" type="button" value="按钮3" onclick="deleteBtn('btn3')">
</div>
<script>
    function deleteBtn(el) {
        let elementById = document.getElementById(el);
        elementById.parentNode.removeChild(elementById)
    }
</script>

优化：

<div>
    <input type="button" value="按钮1" onclick="deleteBtn(this)">
    <input type="button" value="按钮2" onclick="deleteBtn(this)">
    <input type="button" value="按钮3" onclick="deleteBtn(this)">
</div>
<script>
    function deleteBtn(el) {
       el.parentNode.removeChild(el)
    }
</script>

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>

。

定时任务和延时操作

在实际开发中经常使用定时任务和延时操作，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秒。