数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 JavaScript HTML DOM 定义节点列表中的节点数量？
在本教程中，我们将学习如何找到 JavaScript 中节点列表中存在的节点数量。要执行此特定操作，我们需要使用 HTML DOM，它可以帮助我们处理网页的对象模型。
现在让我们首先了解 HTML 中的节点和节点列表是什么。HTML 文档中的所有内容，包括元素、文本、属性以及整个文档，都是节点。HTML 文档中存在的每个小元素都是 HTML DOM 导航树的一部分。
节点列表只不过是 HTML 文档中所有节点的集合。它由诸如 childNodes 之类的属性以及 querySelectorAll() 方法返回。
语法
定义节点列表中节点数量的语法如下：
const var_name = document.querySelectorAll("tag_name");
var_name.length
现在我们将研究一个示例，在该示例中我们将使用段落节点的节点列表。
方法 1
在这种方法中，我们按照以下步骤使用 JavaScript HTML DOM 定义节点列表中的节点数量：
创建一个段落标签，并在其中写入一些数据。
创建另一个段落，并在其中写入其他一些数据。
现在创建第三个段落，但这次不包含任何数据，只包含一个 id。
在 script 节点内创建一个名为“mylist”的常量变量。
现在调用document.querySelectorAll()方法，并在其中包含 p 标签。
创建另一个名为 result 的变量，并在其中调用“mylist.length”属性。
在最后一步，使用一些文本打印 result 变量的值。
示例
我们可以使用以下代码来执行上述任务：
<!DOCTYPE html>
<html>
<body>
<h2> Tutorials Point </h2>
<p> First paragraph </p>
<p> Second Paragraph </p>
<p id="third"></p>
<script>
const mylist = document.querySelectorAll("p");
let result = mylist.length;
document.getElementById("third").innerHTML = " This is " + result + "rd paragraph. It means this document have "+result+" paragraphs";
</script>
</body>
</html>
节点列表的行为非常类似于数组，但它不是数组，即某些数组属性在其上有效，而某些属性则不适用，例如，我们可以迭代节点列表并可以使用索引号调用其值，但不能使用诸如 pop、delete 或添加元素之类的在数组中使用的方法，当在节点列表上使用时，它会引发错误。
方法 2
让我们研究另一种在 HTML DOM 中定义多个节点列表的方法。在这里，我们将像数组一样迭代节点列表的每个元素并打印其值。
迭代节点列表的每个元素的步骤：
创建 3 个段落标签，并在每个标签中写一个语句。
现在在 script 标签内创建一个函数，并调用document.querySelectorAll()方法，并在其中包含 p 标签。
在其中创建一个 for 循环，使用“length”属性遍历节点列表。
现在使用“style.color”属性更改所有段落的颜色。
最后，将创建的函数与我们在“body”标签中创建的按钮连接起来。
示例
我们可以使用以下代码来执行上述任务：
<!DOCTYPE html>
<html>
<body>
<h2> Tutorials Point </h2>
<p> This is first paragraph </p>
<p> This is second paragraph </p>
<p> This is third paragraph </p>
<button onclick="myFunction()"> Press button to change color of paragraph element </button>
<script>
function myFunction() {
const nodelist = document.querySelectorAll("p");
for (let i = 0; i < nodelist.length; i++) {
nodelist[i].style.color = "#29ab00";
}
}
</script>
</body>
</html>
按下上面的按钮后，所有段落标签的颜色都会改变。
因此，在这个例子中，我们正在迭代节点列表的每个元素并相应地更改其颜色。
节点列表与 HTML 集合（文档元素的集合）非常相似，因为它们都表现出一些类似数组的行为，并且两者都通过从文档中提取一些数据来形成数组，但它们之间也有一些区别，例如在 HTML 集合中，我们可以使用其名称、索引或 ID 调用元素，但在节点列表中，我们只能使用其索引号调用元素。
280 次浏览
