2021-09-08 笔记31

C1任务-31：DOM节点操作（下）

任务背景

通过上一节学习了常用的DOM获取方法和属性后，我们就可以对DOM节点进行操作以达到交互效果，交互效果主要涉及修改，删除，添加三种DOM操作。

任务目标

熟悉常用的节点和属性修改方式
熟悉常用的节点添加和删除方法

任务训练

1.DOM修改

新该值；否则，使用指定的名称和值添加一个新的属性

表1：修改DOM信息的常用方式

2.innerHTML代码示例
改变p元素内容

3.setAttribute(name,value)代码示例
参数：name为属性名，value为属性值
改变img的src属性

4.DOM添加

表2：DOM添加相关方法

createElement(tagName)代码示例
创建一个

元素

appendChild(node)代码示例创建一个新元素

，然后添加到

的最尾部

5.DOM删除
element.removeChild(child)：删除选定的子节点，需要指定其父元素

练习题

1.删除类名为disable的元素，补全横线处代码

2.在ul中的最后一个li元素后添加一个新的li元素，li元素文字内容为input元素的输入值，请补全横线处代码

由题知，添加的为一个新li元素，所以需要创建元素，第一空为createElement由于需要在ul的最后一个元素后插入，参数只有一个lastItem，可知最后一空为appendChild

答：createElement、appendChild