zoukankan      html  css  js  c++  java
  • 常用dom方法封装

    // 封装一个方法能够在元素后面插入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())
     
  • 相关阅读:
    洛谷 P2058 海港(模拟)
    LA 3708 墓地雕塑(模拟)
    Uva 11300 Spreading the Wealth(贪心)
    UVA 11729 Commando War (贪心)
    【洛谷习题】Likecloud-吃、吃、吃
    【洛谷习题】多米诺骨牌
    【洛谷习题】相似基因
    【NOI1995】石子合并
    【洛谷习题】尼克的任务
    【NOIP2004】合唱队形
  • 原文地址:https://www.cnblogs.com/h5it/p/13456521.html
Copyright © 2011-2022 走看看