【学习打卡】第13天 节点的相关操作

课程名称：JavaScript进阶篇

课程章节： DOM对象，控制HTML元素

主讲老师：慕课官方号

课程内容：

今天学习的内容包括： 节点的创建(createElement、createTextNode)、删除(removeChild)、替换(replaceChild)以及插入(appendChild、insertBefore)操作。

课程收获：

appendChild表示在指定节点的最后一个子节点列表之后添加一个新的子节点，使用方法appendChild(newnode)，其中newnode表示指定追加的节点。

insertBefore方法可在已有的子节点前插入一个新的子节点。使用方法insertBefore(newnode,node);，newnode表示要插入的新节点，node表示指定此节点前插入节点。

removeChild方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。使用方法nodeObject.removeChild(node)，其中node是必需的，指定需要删除的节点。

replaceChild实现子节点(对象)的替换。返回被替换对象的引用，使用方法node.replaceChild (newnode,oldnew)，其中newnode是必需的，用于替换 oldnew 的对象。 oldnew 也是必需的，被 newnode 替换的对象。

createElement方法可创建元素节点。此方法可返回一个 Element 对象。使用语法document.createElement(tagName)，其中参数tagName是字符串值，这个字符串用来指明创建元素的类型。如果我们想要将元素显示在页面中，可以与appendChild() 或insertBefore()方法联合使用。

createTextNode方法创建新的文本节点，返回新创建的 Text 节点。使用语法document.createTextNode(data)，其中参数data :是字符串值，可规定此节点的文本。下面实现的是在代码编辑器<script>标签中，创建一个P标签，设置className属性，使用createTextNode创建文本节点"I love JavaScript!"

今天学习的DOM对象，控制HTML元素的9-12到9-17，共6个小结，花费了55分钟，学到了我们如何利用节点的新增给我们的DOM添加别的标签或者修改DOM中的内容，我们也可以不写内容，直接使用createELement去创建标签，然后通过createTextNode创建内容，最后将元素添加到body中，显示对应的代码内容。我们也可以使用代码删除我们DOM中不需要的标签。