首页 > 其他 > 详细

常用dom方法封装

时间:2020-08-08 10:31:50      阅读:80      评论:0      收藏:0      [点我收藏+]
// 封装一个方法能够在元素后面插入dom元素 (在原型链上编程)
 
<div>
    <span></span>
    <p></p>
    <strong></strong>
    <i></i>
    <address></address>
</div>

  

 
Element.prototype.insertAfter=function(targetNode,afterNode){
    var beforeNode=afterNode.nextElementSibling;
   if(beforeNode==null){
         this.appendChild(targetNode)
    }else{
      this.insertBefore(targetNode,beforeNode);
    } 
}


var div=document.getElementsByTagName(‘div‘)[0];
var strong=document.getElementsByTagName(‘strong‘)[0];
var p=document.getElementsByTagName(‘p‘)[0];
var ul=document.createElement(‘ul‘);

div.appendChild(ul)
Element.prototype.insertAfter=function(targetNode,afterNode){
  var beforeNode=afterNode.nextElementSibling;
  if(beforeNode==null){
    this.appendChild(targetNode)
  }else{
    this.insertBefore(targetNode,beforeNode);
  } 
}

var li=document.createElement(‘li‘);
div.insertAfter(li,strong)

 

// 遍历元素节点树(在原型链上编程)
var a=[];
Element.prototype.allElements=function(){
          
          var dom=this
          for(var i=0;i<dom.children.length;i++){
              a.push(dom.children[i])
              if(dom.children[i].hasChildNodes()){
                  // console.log(this.children[i].children[i])

                   dom.children[i].allElements();
              }
               
               
          }
       return a;

    }

console.log(div.allElements())

 

 

常用dom方法封装

原文:https://www.cnblogs.com/h5it/p/13456521.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!