如何在JavaScript中使用DOM访问列表值？-英雄云拓展知识分享

匿名投稿 312 2024-01-22

我想要一个包括值的数组（或简单的字符串值，如果不是数组） <ul>。我的代码以下：

<!DOCTYPE html><html>
<head>
</head>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<button onclick="changeColor()">Change</button>
<script type="text/javascript">
function changeColor(){
var a=document.childNodes[1].childNodes[2].childNodes[3];
alert(a.childNodes[0]);
}
</script>
</body>
</html>

我被提示的值是未定义内涵的或[对象文本]，而我想要一个数组，以便我可使用数组[0]或类似的东西访问它们。

看答案

做 querySelectorAll()

function changeColor() {var a = document.querySelectorAll('ul li')
console.log(a[0].innerHTML);}

<h2>Unordered List with Disc Bullets</h2><ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul><button onclick="changeColor()">Change</button>

用于Nodelist阵列创建Li Text 和 forEach() 迭代数组。 arr

function changeColor() {var arr=[];
document.querySelectorAll('ul li').forEach(function(a){
arr.push(a.textContent)
})
console.log(arr);}

<h2>Unordered List with Disc Bullets</h2><ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul><button onclick="changeColor()">Change</button>

🚀🌟 点击注册免费试用超级应用平台-英雄云企业级hpapaas 🌟🚀 😃👉🌐

免责声明：

本网址（www.yingxiongyun.com）发布的材料主要源于独立创作和网友匿名投稿。此处提供的所有信息仅供参考之用。我们致力于提供准确且可信的信息，但不对材料的完整性或真实性作出任何保证。用户应自行验证相关信息的正确性，并对其决策承担全部责任。对于由于信息的错误、不准确或遗漏所造成的任何损失，本网址不承担任何法律责任。本网站所展示的所有内容，如文字、图像、标志、音频、视频、软件和程序等的版权均属于原创作者。如果任何组织或个人认为网站内容可能侵犯其知识产权，或包含不准确之处，请即刻联系我们进行相应处理。