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

最新推荐文章于 2023-08-04 08:55:57 发布

竹了

最新推荐文章于 2023-08-04 08:55:57 发布

阅读量5.2k

点赞数

分类专栏：学习笔记文章标签： JavaScript DOM操作 querySelectorAll input元素类名选择器

本文链接：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的值