JS中返回为NodeList & HTMLCollection对象的方法

NodeList & HTMLCollection 是什么

NodeList 对象是节点的集合,通常是由属性,如Node.childNodes 和 方法,如document.querySelectorAll 返回的。NodeList大部分情况下静态集合

HTMLCollection 接口表示一个包含了元素(元素顺序为文档流中的顺序)的通用集合(generic collection),还提供了用来从该集合中选择元素的方法和属性。HTML DOM 中的 HTMLCollection 是即时更新的(live);当其所包含的文档结构发生改变时,它会自动更新。

以上内容摘自MDN,详细的讲解大家可以参考MDN NodeListMDN HTMLCollection

JS中返回为NodeList对象的方法

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

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

JS中返回为HTMLCollection对象的方法

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

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

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

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

比较代码


  • 1
  • 2
  • 3
  • 4
  • 5

JS中返回为NodeList & HTMLCollection对象的方法_第1张图片

你可能感兴趣的:(javascript前端)