首頁 > web前端 > js教程 > NodeList 和 HTMLCollection :即時集合和靜態集合

NodeList 和 HTMLCollection :即時集合和靜態集合

DDD
發布: 2024-11-06 02:46:02
原創
1016 人瀏覽過

我們將詳細研究NodeListHTMLCollection以及NodeList和HTMLCollection。

首先,兩者都有一個 length 屬性,傳回列表(集合)中元素的數量。


1.HTML集合

HTML DOM 中的

HTMLCollection 已上線;getElementsByClassName()getElementsByTagName() 傳回一個即時HTMollection🎜給定 類別名稱的所有子元素的類似數組的物件.

範例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
      <ul class="items">
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
        <li>item-4</li>
      </ul>
      <ul class="items">
        <li>item-5</li>
        <li>item-6</li>
        <li>item-7</li>
        <li>item-8</li>
      </ul>
      <ul class="items">
        <li>item-9</li>
        <li>item-10</li>
        <li>item-11</li>
        <li>item-12</li>
      </ul>
    <script src="/script.js"></script>
</body>
</html>

登入後複製
登入後複製
登入後複製
const selected = document.getElementsByClassName("items")
console.log(selected)
登入後複製
登入後複製

輸出 :

NodeList and HTMLCollection : Live collection and Static collection


當底層文件變更時,HTMLCollection 會自動更新

讓我們寫一個

範例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
    <div class="card" >
        <div class="card-body" id="main">
          <h5 class="card-title">dev community</h5>
          <p class="card-text">dev community sonay kara</p>
          <a href="#" class="btn btn-primary">dev community sonay kara</a>
        </div>
      </div>

    <script src="/script.js"></script>
</body>
</html>

登入後複製
登入後複製
const selected = document.getElementsByClassName("card")
console.log(selected)
selected[0].innerHTML += `<li class="card">dev.to</li>`;
console.log(selected)

登入後複製

輸出 :

NodeList and HTMLCollection : Live collection and Static collection

從輸出中可以看出,當新的 HTML 標籤加入到具有卡片類別的元素時,

HTMLCollection 會更新因為它是即時的


2. 節點列表

querySelectorAll() 傳回一個 static (非即時) NodeList 表示與指定群組相符的文件元素清單選擇器。但是 childNodes 回傳一個 live NodeList

範例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
      <ul class="items">
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
        <li>item-4</li>
      </ul>
      <ul class="items">
        <li>item-5</li>
        <li>item-6</li>
        <li>item-7</li>
        <li>item-8</li>
      </ul>
      <ul class="items">
        <li>item-9</li>
        <li>item-10</li>
        <li>item-11</li>
        <li>item-12</li>
      </ul>
    <script src="/script.js"></script>
</body>
</html>

登入後複製
登入後複製
登入後複製
const selected = document.querySelectorAll(".items")
console.log(selected)

登入後複製

輸出 :

NodeList and HTMLCollection : Live collection and Static collection


當對底層文件進行更改時,

querySelectorAll() 傳回的 NodeList 不會自動更新,因為 它是非活動的

讓我們寫一個

範例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
    <div class="card" >
        <div class="card-body" id="main">
          <h5 class="card-title">dev community</h5>
          <p class="card-text">dev community sonay kara</p>
          <a href="#" class="btn btn-primary">dev community sonay kara</a>
        </div>
      </div>

    <script src="/script.js"></script>
</body>
</html>

登入後複製
登入後複製
const selected = document.querySelectorAll(".card")
selected[0].innerHTML += `<li class="card">dev.to</li>`;
console.log(selected)
登入後複製

輸出 :

  • 瀏覽器

NodeList and HTMLCollection : Live collection and Static collection

  • 控制台

NodeList and HTMLCollection : Live collection and Static collection

從輸出可以看出,當將新的HTML 標籤加入到具有卡片類別的元素時,瀏覽器會更新,但NodeList 不會更新,因為NodeList 不活動.


當底層文件發生變更時,childNodes 傳回的 NodeList 會自動更新,因為它是活動的

範例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
      <ul class="items">
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
        <li>item-4</li>
      </ul>
      <ul class="items">
        <li>item-5</li>
        <li>item-6</li>
        <li>item-7</li>
        <li>item-8</li>
      </ul>
      <ul class="items">
        <li>item-9</li>
        <li>item-10</li>
        <li>item-11</li>
        <li>item-12</li>
      </ul>
    <script src="/script.js"></script>
</body>
</html>

登入後複製
登入後複製
登入後複製
const selected = document.getElementsByClassName("items")
console.log(selected)
登入後複製
登入後複製

輸出 :

NodeList and HTMLCollection : Live collection and Static collection

從輸出可以看出,當一個新的 HTML 標籤加入到具有卡片類別的元素時,NodeList 會更新因為它是活動的


結論

總之,HTMLCollection 總是即時集合。 NodeList 通常是靜態集合。

我們檢查了 NodeListHTMLCollection 是什麼。現在您知道什麼是 NodeList 和 HTMLCollection 了。

以上是NodeList 和 HTMLCollection :即時集合和靜態集合的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板