【學習打卡】第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
中不需要的标签。
共同學習,寫下你的評論
評論加載中...
作者其他優質文章