javascript - How to get all li in ul at a specified index

Question

How to get all the li in the ul of the specified index

I want to write like this
var afterUl=document.querySelectorAll('ul')[sy-1];
var afterLi=afterUl.querySelectorAll('li');
But the following line will Error
leilei.html:128 Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined. . .
How should I write. . Newbie help

Answer 1

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

Thanks to jasonintju for pointing out the error.

The error reported here is not because there is no querySelectorAll method, but because the subscript of the subject is out of bounds, resulting in undefined, undefined There is no querySelectorAll method, so an error is reported.

There is no problem with correct subscript writing.

Supplementary documentation
Element.querySelectorAll() - Web APIs | MDN

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

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

The error message has already reminded you that the querySelectorAll attribute cannot be read because it is undefined

The reason is because querySelectorAll is a method of document, not a method of element.

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

The solution is to use getElementsByTagName

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

You can refer to the introduction of these two APIs in the JavaScript documentation

Document.querySelectorAll - Web API Interface | MDN
element.getElementsByTagName - Web API Interface | MDN

Or use jQuery

var aLi = $('ul').eq(0).find('li');

Answer 2

There are many ways to implement it. You can use native JavaScript or various js libraries to implement it.
Here we use native JavaScript to organize an idea, add an id attribute to the DOM element of ul, remove the ul through document.getElementById, and then remove the li element through getElementsByTagName.

The code is as follows:

<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);

Answer 3

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

Answer 4

I found the error myself, because the variable sy in my subsequent index [sy-1] was assigned when traversing all li before. Because all li are much more than all ul, so [sy-1] exceeds ul. number, the upper line will be undefined and the lower line will report an error.
Thank you everyone. . This question is too childish. .