自己封装的Dom获取节点元素等库

最新推荐文章于 2021-04-26 18:15:55 发布

吃土豆炖豆角文艺吗

最新推荐文章于 2021-04-26 18:15:55 发布

阅读量206

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_40710524/article/details/97803624

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div>
  <!--结构-->
  <div>1</div>
  <div id="cur">2</div>
  <div>3</div>
</div>
<script type="text/javascript">
var DomTools = {
  next: function(ele){
    /* 
    获取同级目录下后面相邻得元素
    */
    var target = ele.nextSibling;
    while(target.nodeType !=1)
    {
        target = target.nextSibling;
    }
    return target;
  },
  prev: function(ele){
    /* 
    获取同级目录下前面相邻得元素
    */
    var target = ele.previousSibling;
    while(target.nodeType !=1)
    {
        target = target.previousSibling;
    }
    return target;
  },
  nextAll: function(ele){
    /* 
    获取同级目录下后面所有得元素
    */
    var arr= [];
    var target = ele.parentElement.children;
    for(var i = target.length-1;i>0;i--)
    {
        if(target[i]==ele)
        {
            break;
        }
        arr.unshift(target[i]);
    } 
    return arr;
   
  },
  prevAll: function(ele){
    /* 
    获取同级目录下前面所有得元素
    */
    var arr = [];
    var target = ele.parentElement.children;
    for(var i =0;i<target.length;i++)
    {
        if(target[i]==ele)
        {
            break;
        }
        arr.push(target[i]);
    }
    return arr;

  },
  first: function(ele){
    /* 
    获取子元素中得第一个元素
    */
    var target = ele.children;
    for(var i=0;i<target.length;i++)
    {
      if(target[i].nodeType ==1)
      {
          break;
      }
    }
    return target[i];

  },
  last: function(ele){
    /* 
    获取子元素中得最后一个元素
    */
    var target = ele.children;
   for(var i= target.length-1;i>0;i--)
   {
       if(target[i].nodeType ==1)
       {
           break;
       }
   }
    return target[i];
  },
  eq: function(current){
    // 方法
    var parent = current.parentNode;
    for(var i=0;i<parent.children.length;i++){
        if(current == parent.children[i]){
          return i;
        }
    }
    /*根据坐标获取相应位置得元素*/
  },
  getElementsByClassName: function(className){
    /*
    重写这个方法
    */
    var allElements=document.getElementsByTagName("*"); 
    var resultArray=[]; 
    for(var i=0,j=0;i<allElements.length;i++)
    { 
      if(allElements[i].className==className)
      { 
        resultArray[j]=allElements[i]; 
        j++; 
      } 
   } 
    return resultArray; 
  }
}

// 调用
var cur = document.getElementById('cur');
console.log(DomTools.eq(cur))

</script>
</body>
</html>

吃土豆炖豆角文艺吗

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自己封装的Dom获取节点元素等库

<!DOCTYPE html><html><head> <title></title></head><body><div>  <div>1</div> <div id="cur">2</div> ...
复制链接

扫一扫