Do all html nodes have a "getElementsBy" and getElementBy" version?

javascript html nodelist
calvincoxiii picture calvincoxiii · Aug 7, 2017 · Viewed 10.6k times · Source

I'm learning vanilla js and something that keeps coming up is that I see some examples of code that say document.getElementBy... or document.getElement(s)By..., Is it the case that every html node has a corresponding js dom form where getElementBy refers to a single node and getElementsBy refers to a nodeList?

Answer

Rounin picture Rounin · Aug 8, 2017

Principal element gathering methods from the DOM API are:

  • document.getElementById('[ID]') // returns live HTML Element Object
  • document.getElementsByClassName('[CLASS]') // returns live HTML Collection Object
  • document.getElementsByName('[NAME]') // returns live HTML Collection Object
  • document.getElementsByTagName('[ELEMENT-TYPE]') // returns live HTML Collection Object

and

  • document.querySelector('[CSS-SELECTOR]') // returns static HTML Element Object
  • document.querySelectorAll('[CSS-SELECTOR]') // returns static NodeList Object

Related questions

When is NodeList live and when is it static?

From MDN for NodeList: In some cases, the NodeList is a live collection, which means that changes in the DOM are reflected in the collection. For example, Node.childNodes is live: var parent = document.getElementById('parent'); var child_nodes = parent.…

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More