zoukankan      html  css  js  c++  java
  • 关于HTML中,如何根据元素的className获取元素?

      getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持
      我们知道,原生的方法,是getElementById()和getElementsByTagName(),这两个不会有兼容问题,但是遇到class的问题还是没法解决。所以这里总结两种封装方法,可以用它们来获取指定的class元素。当然,对于现代浏览器开发,还可以使用querySelector()和querySelectorAll(),他们的功能更加强大。

    1.数组遍历的方法:

     1 function getByClass(sClass,oParent){
     2         
     3     var parent = oParent || document;
     4     var aEles = parent.getElementsByTagName('*');
     5     var arr = [];
     6     
     7     for(var i=0; i<aEles.length; i++){
     8         
     9         var aClass = aEles[i].className.split(' ');
    10         
    11         for(var j=0; j<aClass.length; j++){
    12             if(aClass[j] == sClass){
    13             
    14                 arr.push(aEles[i]);
    15                 
    16             }    
    17         }
    18     }
    19     return arr;
    20 }

    2.正则匹配的方法

     1 function getElementsByClassName(oParent, sClass){
     2     var aEle = oParent.getElemnetsByTagName('*');
     3     var result = [];
     4     var re = new RegExp('\b' + sClass + '\b', 'i');
     5     
     6     for(var i=0; i<aEle.length; i++){
     7         if(re.test(aEle[i].className)){
     8             result.push(aEle);    
     9         }    
    10     }
    11     return result;
    12 }

      最后,值得一提是,前端页面实现中,性能的影响往往出现在DOM的操作中。此外,还要注意元素的回流和重绘问题。

  • 相关阅读:
    SQLServer 2008 还原数据库备份版本不兼容的问题
    全排列函数
    n & 1
    最长公共子序列(LCS)最长递增子序列(LIS)
    unity3DGI
    多继承的缺点
    JSON文件导入Unity3d中是空的的问题
    丑数
    整数中1出现的次数
    检测鼠标是否在UI上unity
  • 原文地址:https://www.cnblogs.com/zhangxiaohang/p/5523157.html
Copyright © 2011-2022 走看看