資料結構
網路
關係資料庫管理系統 (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 次瀏覽
