JS返回NodeList和HTMLCollection详解

HTML DOM 集合 (Collection) 概述


HTML DOM 集合 (Collection) 是一组 HTML 元素,这些元素可以通过 JavaScript 代码进行访问和操作。HTML DOM 集合通常由一个或多个 HTML 元素组成,并提供了访问和操作这些元素的方法。HTML DOM 集合在 JavaScript 中非常常见,因为它们可以帮助我们轻松地访问和操作网页中的多个元素。

HTML DOM 集合 (Collection) 通常由以下三种类型的集合组成:

  1. HTMLCollection: 该类型的集合包含了一组 HTML 元素,并且这些元素都是有序的。HTMLCollection 类型的集合通常是由一个 HTML 元素的属性(例如 getElementsByTagName、getElementsByClassName、children 等)返回的。
  2. NodeList: 该类型的集合也包含了一组 HTML 元素,但是这些元素不一定是有序的。NodeList 类型的集合通常是由一个 JavaScript 对象(例如 document、Element 对象等)的属性(例如 childNodes、querySelectorAll 等)返回的。
  3. NamedNodeMap: 该类型的集合包含了一组属性节点,这些属性节点通常是由一个 HTML 元素的 attributes 属性返回的。

JS中返回DOM对象本身的方法

  1. 通过id获取的getElementById()方法
  2. 通过选择器获取的document.querySelector()方法

JS中返回为NodeList对象的方法

文档结构发生改变时,如document.createElement()方法增加节点,返回结果不会变化

  1. document.querySelectorAll()方法,当文档中节点更新后重新调用该方法,返回结果才会是最新的结果。
  2. document.getElementsByName()方法

JS中返回为HTMLCollection对象的方法

文档结构发生改变时,如document.createElement()方法增加节点,返回结果会动态更新,即每次都是取到最新的结果

  1. document.getElementsByTagName()
  2. document.getElementsByClassName()

下面让我们通过一些示例代码来更加深入地理解 HTML DOM 集合 (Collection) 的作用和用途。




    
    Title


  • 1
  • 2
  • 3
  • 4
  • 5

效果

JS返回NodeList和HTMLCollection详解_第1张图片

你可能感兴趣的:(JavaScript学习总结,javascript,前端,java)