我怎样才能控制台.log第二个li元素使用javascript onclick

Question

<h3>Shirts</h3>
<ul id='list'>
<li>Biker Jacket</li>
<li>Mens Shirt</li>
</ul>

我需要得到控制台.log出第二个 li 元素。我尝试了下面的代码，但我只能访问第一个 li 元素

document.querySelector("li").onclick = () => {
console.log("Biker Jacket");
};

Answer 1

> 只需改用querySelectorAll()方法，并像这样定位第二个li元素：

document.querySelectorAll("#list li")[1].onclick = () => {
console.log("Biker Jacket");
};

<h3>Shirts</h3>
<ul id='list'>
<li>Biker Jacket</li>
<li>Mens Shirt</li>
</ul>

Answer 2

对第二个使用querySelectorAll[1]：

document.querySelector("li").onclick = () => {
console.log("Biker Jacket");
};
document.querySelectorAll("li")[1].onclick = () => {
console.log("Mens Shirt");
};

<h3>Shirts</h3>
<ul id='list'>
<li>Biker Jacket</li>
<li>Mens Shirt</li>
</ul>

由于这似乎是您要console.log单击的列表项的文本内容，因此您可以这样做：

function showText(elem) {
console.log(elem.innerText);
}
document.querySelectorAll("li").forEach(li => li.addEventListener("click", () => showText(li)));

<h3>Shirts</h3>
<ul id='list'>
<li>Biker Jacket</li>
<li>Mens Shirt</li>
</ul>

Answer 3

您可以使用 li 的此单击传递元素，并使用 textContent 打印其文本

function a(e)
{
console.log(e.textContent)
}

<h3>Shirts</h3>
<ul id='list'>
<li onclick="a(this)">Biker Jacket</li>
<li onclick="a(this)">Mens Shirt</li>
</ul>

Answer 4

您可以使用:nth-child(x)伪选择器将元素置于位置x，如下所示：

document.querySelector("ul#list > li:nth-child(2)").onclick = () => {
console.log("Biker Jacket");
};

<h3>Shirts</h3>
<ul id='list'>
<li>Biker Jacket</li>
<li>Mens Shirt</li>
</ul>

Answer 5

有几种方法可以选择它：

const item = document.querySelector("ul>li:nth-child(2)")

或

const item = document.querySelectorAll('#list li')[1]

或者，如果它只是您需要的任何列表中的最后一件事：

const items = document.querySelectorAll('#list li');
const item = items[items.length-1];

选择项目后，向其添加单击处理程序：

item.addEventListener('click', ()=>{
console.log(this.innerText);
});