问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js中封装类时候，为啥需要针对一个标签节点的多个类名进行split？

头像
viaChanging
    413
    新手上路，请多包涵

    js中封装类时候，为啥需要针对一个标签节点的多个类名进行split？不进行split时候筛选的结果也对的啊。

    • 未采用split对一个类的对个标签进行分割。

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      div{
        width: 20px;
        height: 20px;
        margin: 10px auto;
        background-color: red;
      }
    </style>
    <script type="text/javascript">
      window.onload=function(){
        function getClass(classname){
          if (document.getElementsByClassName)
          {
            return document.getElementsByClassName(classname);
          }
          var arr=[];
          var dom=document.getElementsByTagName("*");
          for(var i=0;i<dom.length;i++)
          {
            if(dom[i].className==classname)
            {
              arr.push(dom[i]);
            }
          }
          return arr;
        }
        console.log(getClass("demo"));
        console.log(getClass("demo").length);
        for(var i=0;i<getClass("demo").length;i++)
        {
          getClass("demo")[i].style.backgroundColor="yellow";
        }
      }
    </script>
</head>
<body>
 <div></div>
 <div class="demo"></div>
 <div></div>
 <div class="test demo "></div>
 <div></div>
 <div></div>
 <div class="demo"></div>
 <div></div>
 <div></div>
 <div class="demo java"></div>  
</body>
</html>

    • 采用了split对一个标签的多个类名进行分割：

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      div{
        width: 20px;
        height: 20px;
        margin: 10px auto;
        background-color: red;
      }
    </style>
    <script type="text/javascript">
     window.onload=function(){
      function getClass(classname){
        if(document.getElementsByClassName)
        {
          return document.getElementsByClassName(classname);
        }
        var arr=[];
        var doms=document.getElementsByTagName("*");
        for(var i=0;i<doms.length;i++)
        {
          var txtarr=doms[i].className.split(" ");
          for(var j=0;j<txtarr.length;j++)
          {
            if(txtarr[j]=classname)
            {
              arr.push(txtarr[j]);
            }
          }
        }
        return arr;
      }
      console.log(getClass("demo"));
      console.log(getClass("demo").length);
      for(var i=0;i<getClass("demo").length;i++)
      {
        getClass("demo")[i].style.backgroundColor="yellow";
      }

     }
    
    </script>
</head>
<body>
 <div></div>
 <div class="demo"></div>
 <div></div>
 <div class="test demo "></div>
 <div></div>
 <div></div>
 <div class="demo"></div>
 <div></div>
 <div></div>
 <div class="demo java"></div>  


</body>
</html>

    结果都是一样的，为啥还需要对标签的类名进行分割呢？

    javascripthtmlcss
    阅读 3k
    2 个回答
    得票最新
    头像
    新しい世界
      1.5k2621

      上面两段代码都使用了 getElemnetsByClassName 方法，没有运行你写的 fallback 代码
      你可以学习一下如何在浏览器开发者工具中调试js代码

      头像
      Aiello_Chan
        86011117

        亲啊，你要学会如何用浏览器进行调试。你说的一样是因为两个代码都没有被执行的，运行一下我的这个代码你就明白了。（强烈要求学会如何调试）

        <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      div{
        width: 20px;
        height: 20px;
        margin: 10px auto;
        background-color: red;
      }
    </style>
    <script type="text/javascript">
      window.onload=function(){
        function getClass(classname){
          if (document.getElementsByClassName)
          {
            alert("I'm done!");
            return document.getElementsByClassName(classname);
          }
          alert("被遗忘，呵呵");
          var arr=[];
          var dom=document.getElementsByTagName("*");
          for(var i=0;i<dom.length;i++)
          {
            if(dom[i].className==classname)
            {
              arr.push(dom[i]);
            }
          }
          return arr;
        }
        console.log(getClass("demo"));
        console.log(getClass("demo").length);
        for(var i=0;i<getClass("demo").length;i++)
        {
          getClass("demo")[i].style.backgroundColor="yellow";
        }
      }
    </script>
</head>
<body>
 <div></div>
 <div class="demo"></div>
 <div></div>
 <div class="test demo "></div>
 <div></div>
 <div></div>
 <div class="demo"></div>
 <div></div>
 <div></div>
 <div class="demo java"></div>  
</body>
</html>

        意思就是，它检测到了document.getElementsByClassName 这个方法存在后，后面的代码都不会执行了，理应说你这个问题会被扣分的

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题