自定义byClassName

最新推荐文章于 2024-01-17 08:37:45 发布

东方求败、

最新推荐文章于 2024-01-17 08:37:45 发布

阅读量319

点赞数

分类专栏： javascript复习之路 # javascript基础

本文链接：https://blog.csdn.net/wang_swa99er/article/details/119934781

版权

JavaScript DOM操作类名查找元素遍历 CSS属性修改

关键词由CSDN通过智能技术生成

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

自定义byClassName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            node.getElementByClassName()
         */
         
         function elementByClassName(node,classStr){
             //1.获取node这个节点下所有的子节点
             var nodes = node.getElementsByTagName("*");
             var arr = [];
             for(var i=0;i<nodes.length;i++){
                 if(nodes[i].className === classStr){
                     arr.push(nodes[i]);
                 }
             }
                return arr;
         }

         window.onload = function(){
             var oL = document.getElementById("ol1");
             var nodes = elementByClassName(oL,"box")
             alert(nodes.length);
             for(var i=0;i<nodes.length;i++){
                 nodes[i].style.backgroundColor = 'red';
             }
         }
    </script>
</head>
<body>
    <ul id = 'ul1'>
        <li>111</li>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li name='hello'>111</li>
        <li>111</li>
        <li>111</li>
        <div class='box' name='hello'>111</div>
    </ul>
    <input type="text" name='hello'/>
    <br>
    <span name='hello'>111</span>
    <ol id = 'ol1'>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ol>
</body>
</html>

运行结果：
在这里插入图片描述

东方求败、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
自定义byClassName

自定义byClassName<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> /*
复制链接

扫一扫