DOM的基本操作练习代码

原创
2019/01/04 14:29
阅读数 1.3K

1.用DOM动态生成这样一个结构:

<div class=”example”>

      <p class=”slogan”>HelloWorld</p>

</div>

 

我认为中规中矩的写法是这个样子的:

• 不过这里有点小提示,节点的className属性可以读写操作class。

因此这里我们为标签赋类名的值的时候可以不用setAttribute,可以直接用className。

不过,还有一个最取巧的办法,那就是直接用innerHTML。

 

2.封装函数InsertAfter();功能类似insertBefore,直接在原型链上编程,可以忽略老版本的浏览器。

代码:

这里是利用了原生的insertBefore方法,我们检测当只有一个子元素或者我们要找的元素就是最后一个,那么直接调用appendChild方法就可以,否则就找到要找的元素的下一个,然后把它的下一个元素当做insert的元素调用insertBefore方法就可以了。

 

3.封装remove()函数,使得child.remove()可以销毁自身。

看题目的要求就是要在原型链上编程。

代码:

这个问题的代码其实很简单,只要找到这个元素的父级,然后让父级删除掉这个元素就可以了。

 

4.将目标节点内部的节点顺序逆序。

eg: <div><p></p><a></a></div>    —>

<div><a></a><p></p></div>

对于这个题目,我的做法是利用我们插入的元素如果是本身就存在的,那么就会剪切到新的位置上这个特性来做的。

代码:

 

展开阅读全文
打赏
1
4 收藏
分享
加载中
第一张图,创建text时,写错了吧,document.createTextNote('HelloWorld');
2019/01/15 17:41
回复
举报
更多评论
打赏
1 评论
4 收藏
1
分享
返回顶部
顶部