DOM基础操作实战代码
Posted pandawind
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM基础操作实战代码相关的知识,希望对你有一定的参考价值。
对于已经讲解给大家的DOM实战,我今天给大家几个实战代码,可以让大家加深对此的理解!
1.用DOM动态生成这样一个结构:
1 <div class=”example”> 2 3 <p class=”slogan”>HelloWorld</p> 4 5 </div>
我认为中规中矩的写法是这个样子的:
1 var div = document.createElement(‘div’), 2 p = document.createElement(‘p’), 3 text = document.create(‘HelloWorld’); 4 div.setAttribute(‘class’, ‘example’); 5 p.setAttribute(‘class’, ‘slogan’); 6 p.appendChild(text); 7 div.appendChild(p); 8 document.body.append(div);
javascript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
? 不过这里有点小提示,节点的className属性可以读写操作class。
因此这里我们为标签赋类名的值的时候可以不用setAttribute,可以直接用className。
1 div.className = ‘example’; 2 p.className = ‘slogan’;
不过,还有一个最取巧的办法,那就是直接用innerhtml。
1 div.innerHTML = <p class=“slogan”>HelloWorld</p>
2.封装函数InsertAfter();功能类似insertBefore,直接在原型链上编程,可以忽略老版本的浏览器。
代码:
1 Element.insertAfter = function (targetNode, afterNode) { 2 var nextSib = after.nextElementSibling; 3 if(this.children.length <= 1 || !nextSib) { 4 this.appendChild(targetNode); 5 }else { 6 this.insertBefore(targetNode, nextSibling); 7 } 8 }
这里是利用了原生的insertBefore方法,我们检测当只有一个子元素或者我们要找的元素就是最后一个,那么直接调用appendChild方法就可以,否则就找到要找的元素的下一个,然后把它的下一个元素当做insert的元素调用insertBefore方法就可以了。
3.封装remove()函数,使得child.remove()可以销毁自身。
看题目的要求就是要在原型链上编程。
代码:
1 Element.prototype.remove = function () { 2 var parent = this.parentNode; 3 parent.removeChild(this); 4 }
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
这个问题的代码其实很简单,只要找到这个元素的父级,然后让父级删除掉这个元素就可以了。
4.将目标节点内部的节点顺序逆序。
eg: <div><p></p><a></a></div> —>
<div><a></a><p></p></div>
对于这个题目,我的做法是利用我们插入的元素如果是本身就存在的,那么就会剪切到新的位置上这个特性来做的。
代码:
Element.prototype.reverseElement = function(){ var len = this.childNodes.length, child, first = this.firstChild; for (var i = 0; i < len - 1; i++){ child = this.lastChild; this.insertBefore(child, first); } }
以上是关于DOM基础操作实战代码的主要内容,如果未能解决你的问题,请参考以下文章
Web自动化必会「Web基础元素定位元素操作Selenium运行原理项目实战+框架」
Vue 开发实战基础篇 # 7:理解虚拟DOM及key属性的作用
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段