H5新增获取元素方式

举报
花花叔叔 发表于 2022/08/23 22:52:10 2022/08/23
【摘要】 getElementsByClassName 语法 querySelector()语法 和 返回值 只是获取一个 querySelectorAll()语法 和 返回值 可以获取所有 <!DOCTY...

getElementsByClassName 语法
querySelector()语法 和 返回值 只是获取一个
querySelectorAll()语法 和 返回值 可以获取所有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <ul id="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        // 1. 根据类名获取元素
        var box = document.getElementsByClassName('box');
        console.log(box);
        // 2. 返回指定的第一个元素
        // 要注意一下。前面要加标志
        var first = document.querySelector('.box');
        console.log(first);
        var firstli = document.querySelector('li');
        console.log(firstli);
        // 3. 选中所有输出
        var all = document.querySelectorAll('.box');
        console.log(all);
        
        
    </script>
</body>
</html>

文章来源: blog.csdn.net,作者:花花叔叔,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/qq_52077949/article/details/120162353

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。