问答博客资讯标签用户活动
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

querySelectorAll的使用出错

头像
倾国倾城的小饼干
    5111522
    <body>
    <div id='ct1'>
        <ul class="ct">
            <li>这里是</li>
            <li>123</li>
            <li>前端6班</li>
        </ul>
    </div>
    <script>
        var Li=document.querySelectorAll('li');
        Li.addEventListener('click',function(){
            console.log('hello')
        })
    </script>
</body>

    想要选中所有的li标签，但是用querySelectorAll('li')出错，但是改成querySelector('.ct')的话就对了，为什么呢？

    javascript
    阅读 11.6k
    4 个回答
    得票最新
    头像
    testnullundefine
      2.5k32141
      ✓ 已被采纳

      Li 使用 querySelectorAll("li") 获取的是 数组，数组不能使用 addEventListener 需要遍历监听事件

      声明一下：上述中 NodeList 并不是严格数组，但是能够进行数组的迭代。(IE某些版本无法使用forEach)

                  var Li=document.querySelectorAll('li');
            Li.forEach(function(item){
                item.addEventListener('click',function(){
                    console.log(item.innerHTML);
                })
            })

      而且 你用 querySelector('ul') // 你用的class 获取的是 ul对象，不是数组，因此可以直接给ul使用addEventListener().实际上你是监听的 ul，而不是li.

      按照你的方式.要获取li必须进行委托：

                  var Li=document.querySelector('.ct');
            Li.addEventListener('click',function(event){
                var li = event.target;
                console.log(li.innerHTML);
            })
      头像
      freedomer
        222

        all查出来的是个nodeList,你需要 for of遍历或者把nodeList转换成数组，然后forEach遍历每一个元素，然后再监听。
        querySelect查的是第一个匹配的元素所以可以加监听

        头像
        看有个大西瓜
          45934663

          报错Uncaught TypeError: Li.addEventListener is not a function 你不能这样注册事件,毕竟这不是jquery `var Li = document.querySelectorAll('li');

          for (var i = 0; i < Li.length; i++) {
    Li[i].addEventListener('click', function() {
        console.log('hello')
    })
}` 你需要这样
          头像
          小豆子的牛儿
            2431616

            1，你通过querySelectorAll获取到的是所有的li, 给所有的li添加事件, 你可以

            Array.from(document.querySelectorAll('body li')).map(item => {item.addEventListener('click', function(){
 console.log('1')
}, false)})

            2， 你通过class获取到的是ul, 是单个元素, 可以添加事件

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