再谈DOM原生操作！

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012194956/article/details/82761738

前面已经有一篇博文总结了一些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.insertAfter(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].className="aa";
*/
//相应还有删除属性的方法removeAttribute(attrName)

/* (5)为第一个li设置样式属性，color为red，字体大小为20pxpx */
lis[0].setAttribute("style","color:blue; font-size:20px;");
/*也可用以下方式
lis[0].style.color="red";
lis[0].style.fontSize="20px"; //注意font-size和fontSize的写法区别，字体大小为字符串
*/