A, HTMLCollection

1. Common methods of returning HTMLCollection objects

  • document.getElementsByTagName()

  • Document. GetElementsByClassName () / / some old version browser, this method returns the NodeList collection
  • document.scripts

  • document.links

  • document.images

  • document.forms

  • Tr.cells // Returns all TD tags
  • Select. Options // Returns so select all options

2, features,

IsArray (HTMLCollection) // returns false. Splice () is also not possible

Represents an HTML collection, similar to an array that has the length attribute but can be retrieved using the [index],.item(index),.namedItem(string) methods

3, how to convert to an array

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
Copy the code
const htmlCollection = document.getElementsByTagName('p') let pArray = [] try { pArray = Array.prototype.slice.call(htmlCollection) } catch (e) { for (let i = 0; i < htmlCollection.length; I ++) {parray.push (htmlCollection[I])}} console.log(htmlCollection) console.log(pArray) // The result is shown in the following figureCopy the code

Second, the NamedNodeMap

1. Common methods for returning NamedNodeMap objects

  • dom.attributes

Third, NodeList

1. Common methods for returning NodeList objects

  • dome.childNodes
  • Dome. querySelectorAll // Most browsers return NodeList