javascript - 要取 指定索引的ul 里的 所有li 怎么取

问题描述

要取 指定索引的ul 里的 所有li 怎么取

我想这么写var afterUl=document.querySelectorAll(’ul’)[sy-1];var afterLi=afterUl.querySelectorAll(’li’);但是下面的一行会报错leilei.html:128 Uncaught TypeError: Cannot read property ’querySelectorAll’ of undefined。。。我应该怎么写。。新手求助

问题解答

----- 06-03 14:50 -----

感谢 jasonintju 指出错误。

这里的报错并不是因为没有 querySelectorAll 方法，是由于题主的 下标 越界了，导致取到的 是 undefined，undefined 没有 querySelectorAll 方法，故报错。

正确的下标写法是没有问题的。

补充文档Element.querySelectorAll() - Web APIs | MDN

----- 06-03 04:30 -----

leilei.html:128 Uncaught TypeError: Cannot read property ’querySelectorAll’ of undefined

报错信息已经给你提示了，不能读取querySelectorAll属性，因为它是 undefined

原因是因为 querySelectorAll 是 document的方法，而不是 element的方法。

var afterUl = document.querySelectorAll(’ul’)[0];// document.querySelectorAll(’ul’) 通过 document 的方法 querySelectorAll 得到了当前文档下的所有 ul 元素，是一个 NodeList 类数组。之后假设通过 [0] 取到了这个 NodeList 中的第一个元素，那么 afterUl 这个变量指向的是一个 DOM 元素，也就是 elementvar afterLi=afterUl.querySelectorAll(’li’);// 这时用 afterUl 也就是一个 element 调用 querySelectorAll，由于 element 下没有 querySelectorAll 这个方法 自然就报错了

解决方案是使用 getElementsByTagName

var oUl = document.getElementsByTagName(’ul’)[0];var aLi = oUl.getElementsByTagName(’li’);

可以参考一下 JavaScript 文档中关于这两个 API 的介绍

Document.querySelectorAll - Web API 接口 | MDNelement.getElementsByTagName - Web API 接口 | MDN

或者使用 jQuery 的

var aLi = $(’ul’).eq(0).find(’li’);回答2：

实现的方式很多，你可以采用原生JavaScript，也可以用各种js库来实现。这里采用原生JavaScript整理一个思路，在ul的DOM元素上添加一个id属性，通过document.getElementById取出ul，然后通过getElementsByTagName取出li元素。

代码如下:

<ul id='ul-wrap'> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul>var ul_wrap = document.getElementById(’ul-wrap’);var li_item = ul_wrap.getElementsByTagName(’li’);console.log(ul_wrap);console.log(li_item);回答3：

let oLis = document.getElementsByTagName('ul')[index].getElementsByTagName('li');

我自己找到错误了，是因为我后面的索引[sy-1]中变量sy的是之前遍历所有li时候赋值的，因为所有li比所有ul多很多，所以[sy-1]超过了ul的个数，上面那行就会undefined 下面那行就报错了。谢谢大家。。这问题太幼稚。。