zoukankan      html  css  js  c++  java
  • JS === 关于getElementsByClassName()

    //练习:封装一个函数,兼容所有浏览器,通过类名取得标签。

    //xxx.getElementsByClassName() IE8及以前的浏览器不兼容,定义一个函数,来实现这个功能

    第一种 == 类名里面 只有一个

    结构:

      <div class="red"></div>
      <div></div>
      <div class="red"></div>
      <div></div>
      <div class="red"></div>
      <div class="red"></div>

    JS:

    function getClass(classname){
      if(document.getElementsByClassName){                 // 如果有 true,执行
        return document.getElementsByClassName(classname); 
      }

      //兼容IE8

      var arr = [];   
      var all = document.getElementsByTagName("*")    //getElementsByTagName("*") ===取得所有标签

      for(var i = 0 ; i <all.length;i++){
        if(all[i].className == classname){
        arr.push(all[i]);
      }
    }
    return arr;
    }

    getClass("red");
    alert(getClass("red").length);

    第二种 == 类名里面 有多个,用空格隔开

    结构:

      <div class="red"></div>
      <div></div>
      <div class="red"></div>
      <div></div>
      <div class="black red"></div>
      <div class="red"></div>

    JS:

    function getClass(classname){
      if(document.getElementsByClassName){
      return document.getElementsByClassName(classname);
     }

      var arr = [];
      var all = document.getElementsByTagName("*")   

      for(var i = 0 ; i <all.length;i++){
        var text = all[i].split(" ");    // 多个类名的时候 用空格分隔开 在遍历每一个
        for(var j = 0 ; j < text.length; j++){
        if(text[j].className == classname){   
          arr.push(all[i]);
        }
      }
     }
      return arr;
    }

      getClass("red");
      alert(getClass("red").length);

    解题思路:

    1. 对于IE8 不支持getElementsByClassName() .. 

    可以选择 getElementsByTagName("*") == 用 * 取得所有标签

    遍历每个标签.className == classname 

    如果是的话== 要返回,所以== 创建一个空数组,利用数组的 push方法,把每个符合条件的添加到数组中。

    2. 多个类名== split()方法 = 在分成数组在遍历小数组,如果有符合的 添加进去。

    === getElementsByTagName("*")

  • 相关阅读:
    如何设置 ComboBox 下拉列表的高度或间距
    winform中ComboBox利用AutoComplete属性实现模糊查询(有缺陷)
    C#中combobox 控件属性、事件、方法
    ComboBox TextUpdate事件
    C#判断页面中的多个文本框输入值是否有重复的实现方法
    c# winfrom程序中 enter键关联button按钮
    WinForm 中ComboBox 绑定总结
    c# 实现ComboBox自动模糊匹配
    C#中ComboBox动态绑定赋值
    WinForm 中 comboBox控件之数据绑定
  • 原文地址:https://www.cnblogs.com/rabbit-lin0903/p/11184912.html
Copyright © 2011-2022 走看看