DOM基础操作实战代码

时间：2023-12-21 20:27:11

对于已经讲解给大家的DOM实战，我今天给大家几个实战代码，可以让大家加深对此的理解！

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

 <div class=”example”>

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

 </div>

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

   var div = document.createElement(‘div’),

   p = document.createElement(‘p’),

   text = document.create(‘HelloWorld’);

   div.setAttribute(‘class’, ‘example’);

   p.setAttribute(‘class’, ‘slogan’);

   p.appendChild(text);

   div.appendChild(p);

   document.body.append(div);    
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

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

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

   div.className = ‘example’;  p.className = ‘slogan’;  
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

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

  div.innerHTML = <p class=“slogan”>HelloWorld</p> 
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

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

代码：





   Element.insertAfter = function (targetNode, afterNode) {

         var nextSib = after.nextElementSibling;

         if(this.children.length <= 1 || !nextSib) {

               this.appendChild(targetNode);

         }else {

               this.insertBefore(targetNode, nextSibling);

         }

   }  




JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)




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


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


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


代码：






   Element.prototype.remove = function () {

         var parent = this.parentNode;

         parent.removeChild(this);

   }   




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);

        }

  }




JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)


相关文章