JS获取指定类名下的input/div/button等特定元素

最新推荐文章于 2024-04-30 16:57:21 发布

竹了

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量4.8k

点赞数

分类专栏：学习笔记文章标签： javascript dom 前端

本文链接：https://blog.csdn.net/qq_36129587/article/details/121871889

版权

学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<body>
   
    <!-- 获取指定类名下的所有input元素 -->
    <div class="aCuteName">
        <div></div>
        <input type="text" value='1'>
        <input type="text" value='2'>
        <ul>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <input type="text" value='3'>
        <input type="text" value='4'>
        <input type="text" value='5'>
        <button>别点我</button>
    </div>
    <div>
        哈哇油
    </div>
    <div>
        <button>玩不一块儿去</button>
        <div>颜值即正义</div>
        <input type="text" value="不在获取范围">
    </div>
    <div class="aCuteName">
        <div>水月洞天YYDS</div>
        <input type="text" value='a'>
        <input type="text" value='b'>
        <button>滚粗</button>
    </div>
    
    <script>
        // 获取指定类名下的指定元素
    let grandfather = document.getElementsByClassName('aCuteName');//获取所有类名为aCuteName的元素
    let children = []//用来接收要获取的数据
    for (let i of grandfather) {
        let father = i.childNodes;//获取每个类名为aCuteName元素的子元素合集
        for (let j in father) {
            if (father[j].localName === "input")//通过localName获取input元素合集
                children.push(father[j]);//将所有input保存在一个数组中
        }
    }
    console.log(children);
    children[5].value = '这是一个暗号'
   </script>

</body>

 // 函数封装 获取指定类名下的所有指定元素
    const getElementsByLocalNameOfClassName = function (className, elementName) {
        let grandfather = document.getElementsByClassName(`${className}`);//获取所有类名为aCuteName的元素
        let children = []//用来接收要获取的数据
        for (let i of grandfather) {
            let father = i.childNodes;//获取每个类名为aCuteName元素的子元素合集
            for (let j in father) {
                if (father[j].localName === `${elementName}`)//通过localName获取input元素合集
                    children.push(father[j]);//将所有input保存在一个数组中
            }
        }
        return children
    }
    let inputsOfaCuteName = getElementsByLocalNameOfClassName('aCuteName','input')//获取类名为aCuteName元素下的所有input元素
    console.log(inputsOfaCuteName[4].value);//打印获取到的第5个input的值

竹了

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS获取指定类名下的input/div/button等特定元素

<body>  <div class="aCuteName"> <div></div> <input type="text" value='1'> <input type="text" value='2'> <ul> <li>3</.
复制链接

扫一扫