再谈DOM原生操作！

最新推荐文章于 2022-07-13 11:40:51 发布

原创

最新推荐文章于 2022-07-13 11:40:51 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

本文通过一个具体的场景，详细介绍了如何使用DOM原生操作方法进行元素的增删改查。包括在指定位置插入元素、删除元素、修改元素内容、设置元素属性以及应用CSS样式。

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

前面已经有一篇博文总结了一些DOM的原生操作方法了，今天进个阶吧^^

给一个场景，其HTML结构如下（假设页面中只有一个ul标签）：

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

现在，我们要对其做如下几个操作：

（1）在第三个li下方增加一个值为6的li

（2）删除第二个li

（3）修改第四个li，更新其值为7

（4）为第二个li设置属性class为“aa”

（5）为第一个li设置样式属性color为red，字体大小为20px

具体实现如下：

//获取指定的ul标签
var ul=document.getElementsByTagName("ul")[0];
//获取标签ul下的所有li标签
var lis=ul.getElementsByTagName("li");

/* (1)在第三个li下方增加一个值为6的li */
var li=document.createElement("li");
li.innerText=6;
ul.insertBefore(li,lis[3]);
//此时列表项为 1 2 3 6 4

/* (2)删除第二个li */
var thisLi=lis[1];
ul.removeChild(thisLi);
//此时列表项为 1 3 6 4

/* (3)修改第4个li，更新其值为7 */
var thisLi1=lis[3];
thisLi1.innerText=7;
//此时列表项为 1 3 6 7

/* (4)为第二个li新增属性class为"aa" */
lis[1].setAttribute("calss","aa");
/*也可用以下方式：
lis[1].classNam