当数字可以更改时获取元素数组的长度（添加或删除元素）

Question

所以我没有这个问题的代码，但我很想知道我是否想创建一个 li 的 ul 并想要添加和删除 li，我知道 li 的数量是动态的。那么在添加或删除时如何获取 li（数组索引）的数量。我试过做 const len = document.querySelectorAll("li") 这只会 return 静态数组的长度，如果我添加或删除 li，它不会改变数组的长度

Answer 1

$("#id li").length

会给你计数。

Answer 2

您可以尝试获取父元素并检查 childElementCount 属性:

const len = document.querySelector("ul").childElementCount;

请注意，每次添加或删除 <li> 时都必须执行此操作。 len 变量将是代码执行时 元素的数量。
这也是您的代码发生的情况，如果您 add/remove 一个 <li> 然后重做代码，数字将改变：

// Let's imagine you have 3 <li> inside a <ul>.
const len = document.querySelectorAll("li");
alert(len.length); // will print 3

// Creating the new <li> element..
const newLi = document.createElement("li");
newLi.appendChild(document.createTextNode("I am new!"));
// ..and adding it to the <ul>
document.querySelector("ul").appendChild(newLi);

// Can't use "len" again here since it's a constant
const len2 = document.querySelectorAll("li");
alert(len2.length); // will print 4
alert(len.length); // will still print 3

Answer 3

document.getElementsByTagName("li") returns 一个实时的 HTMLCollection，所以它的长度应该总是 up-to-date。 https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

当数字可以更改时获取元素数组的长度（添加或删除元素）

getting the length of an array of elements when the number can change (adding or removing elements)

javascript

html-lists