Analyze the difference between querySelector and getElementById methods in JavaScript

1. Overview

When I was looking at the code, I found that querySelector() and querySelectorAll() were basically used to obtain elements, and I wondered why getElementById() was not used.
Maybe because I have never used those two, I don’t know the reason.

1.1 Usage of querySelector() and querySelectorAll()

querySelector() method

Definition: The querySelector() method returns an element in the document that matches the specified CSS selector;
Note: The querySelector() method returns only the first element that matches the specified selector. If you need to return all elements, please use the querySelectorAll() method instead;
Syntax: document.querySelector(CSS selectors);
Parameter value: String Required. Specifies one or more CSS selectors for matching elements. Select elements using their id, class, type, attribute, attribute value, etc.
For multiple selectors, separate them with commas and return a single matching element.
Return value: The first element that matches the specified CSS selector. If not found, returns null. If an invalid selector is specified, a SYNTAX_ERR exception is thrown.

querySelectorAll() Method

Definition: The querySelectorAll() method returns all elements in the document that match the specified CSS selector and returns a NodeList object;
A NodeList object represents a collection of nodes. Can be accessed by index, index value starts from 0;
Tip: You can use the length property of the NodeList object to get the element attributes that match the selector, and then iterate over all elements to get the desired information;
Syntax: elementList = document.querySelectorAll(selectors);
elementList is a static object of NodeList type;
selectors is a string containing one or more CSS selectors separated by commas;
Parameter value: String Required. Specifies one or more elements that match the CSS selector. You can use id, class, type, attribute, attribute value, etc. as selectors to get elements.
Use commas (,) to separate multiple selectors.
Return value: A NodeList object representing all elements in the document that match the specified CSS selector.
NodeList is a static object of type NodeList. If the specified selector is invalid, a SYNTAX_ERR exception is thrown.

1.2 Usage of getElement(s)Byxxxx

getElementById() Method

Definition: The getElementById() method returns a reference to the first object with the specified ID.
If there is no element with the specified ID, it returns null;
If there are multiple elements with the specified ID, the first one is returned;
If you need to find elements that don't have an ID, you can consider using querySelector() with a CSS selector;
Syntax: document.getElementById(elementID);
Parameter value: String Required. The element ID attribute value.
Return value: Element object The element with the specified ID

getElementsByTagName() Method

Definition: The getElementsByTagName() method returns a collection of objects with the specified tag name;
Tip: The parameter value "*" returns all elements of the document;
Syntax: document.getElementsByTagName(tagname)
Parameters: String Required The tag name of the element to be obtained;
Return value: NodeList object, a collection of elements with the specified tag name

getElementsByClassName() method

Definition: The getElementsByClassName() method returns a collection of all elements with the specified class name in the document as a NodeList object.
A NodeList object represents an ordered list of nodes. The NodeList object can access the nodes in the table through the node index number in the node list (the index number starts from 0).
Tip: You can use the length property of the NodeList object to determine the number of elements of the specified class name, and loop through each element to get the one you need.
Syntax: document.getElementsByClassName(classname)
Parameters: String The class name of the element to be retrieved. Multiple class names are separated by spaces, such as "test demo";
Return value: NodeList object, representing the element collection of the specified class name. The order of elements in the collection is the order in which they appear in the code.

2. Difference

2.1 getElement(s)Byxxxx gets a dynamic collection, querySelector gets a static collection

Dynamic means that the selected elements will change with the document, while static means that they will not be related to the changes in the document after they are taken out.

Example 1:

<body>
  <ul id="box">
    <li class="a">Test 1</li>
    <li class="a">Test 2</li>
    <li class="a">Test 3</li>
  </ul>
</body>

<script type="text/javascript">
  //Get ul, in order to dynamically add li later
  var ul = document.getElementById('box');
  //Get the li in the existing ul
  var list = ul.getElementsByTagName('li');
  for(var i =0; i < list.length; i++){
    ul.appendChild(document.createElement('li')); //Dynamically append li
  }
</script>

The above code will fall into an infinite loop, i < list.length This loop condition.
Because after getting the three li in it for the first time, every time a new element is added to ul, the list will update its value and re-get all the li in ul.
That is, getElement(s)Byxxxx obtains a dynamic collection, which will always change with the change of DOM structure.
That is, each call to list will re-query the document, resulting in an infinite loop problem.

Example 1 Modification:

Change the for loop condition to i < 4. As a result, 4 new elements are added to ul, so the number of li tags inserted now is 7.

<body>
  <ul id="box">
    <li class="a">Test 1</li>
    <li class="a">Test 2</li>
    <li class="a">Test 3</li>
  </ul>
</body>

<script type="text/javascript">
  var ul = document.getElementById('box');

  var list = ul.getElementsByTagName('li');
  for(var i = 0; i < 4; i++){
    ul.appendChild(document.createElement('li'));
  }
  console.log('list.length:',list.length);
</script> 

Example 2:

The following code static collection is reflected in .querySelectorAll('li') after getting all the li in ul. No matter how many li are added dynamically later, it will not affect its parameters.

<body>
  <ul id="box">
    <li class="a">Test 1</li>
    <li class="a">Test 2</li>
    <li class="a">Test 3</li>
  </ul>
</body>

<script type="text/javascript">
  var ul = document.querySelector('ul');

  var list = ul.querySelectorAll('li');
  for(var i = 0; i < list.length; i++){
    ul.appendChild(document.createElement('li'));
  }
  console.log('list.length:',list.length); //The output result is still 3, not the number of li at this time 6
</script> 

Why is it designed like this?
The querySelectorAll method is clearly defined in the W3C specification:

The NodeList object returned by the querySelectorAll() method must be static ([DOM], section 8).

Let's take a look at what happens on Chrome:

document.querySelectorAll('a').toString(); // return "[object NodeList]"
document.getElementsByTagName('a').toString(); // return "[object HTMLCollection]"

HTMLCollection is defined as follows in W3C:

An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node's name or id attributes. Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.

In fact, HTMLCollection and NodeList are very similar. They are both dynamic collections of elements, and each access requires re-querying the document.
Difference: HTMLCollection belongs to the Document Object Model HTML specification, while NodeList belongs to the Document Object Model Core specification.
This is a bit difficult to understand, it will be easier to understand if you look at the following example:

var ul = document.getElementsByTagName('ul')[0],
    lis1 = ul.childNodes,
    lis2 = ul.children;
console.log(lis1.toString(), lis1.length); // "[object NodeList]" 11
console.log(lis2.toString(), lis2.length); // "[object HTMLCollection]" 4

The NodeList object will contain all nodes in the document, such as Element, Text, and Comment;
The HTMLCollection object will only contain the Element nodes in the document;
In addition, the HTMLCollection object provides one more namedItem method than the NodeList object;
Therefore, in the browser, the return value of querySelectorAll is a static NodeList object, while the return value of the getElementsBy series is actually an HTMLCollection object.

2.2 The received parameters are different

The parameter received by the querySelectorAll method is a CSS selector;
The parameters received by the getElementsBy series can only be a single className, tagName and name;

var c1 = document.querySelectorAll('.b1 .c');
var c2 = document.getElementsByClassName('c');
var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('c');

Note: The parameters received by querySelectorAll must strictly comply with the CSS selector specification .<br /> The following writing will throw an exception (element names, classes and IDs in CSS selectors cannot start with numbers).

try {
  var e1 = document.getElementsByClassName('1a2b3c');
  var e2 = document.querySelectorAll('.1a2b3c');
} catch (e) {
  console.error(e.message);
}
console.log(e1 && e1[0].className);
console.log(e2 && e2[0].className);

2.3 Different browser compatibility

querySelectorAll is supported by IE 8+, FF 3.5+, Safari 3.1+, Chrome and Opera 10+;
getElementsBy series, taking getElementsByClassName as an example, which is added to the specification at the latest, is already supported by IE 9+, FF 3+, Safari 3.1+, Chrome and Opera 9+;

2.4 querySelector belongs to the Selectors API specification in W3C, while the getElementsBy series belongs to the DOM specification of W3C

Reference articles (delete if infringement)

This is the end of this article about the difference between querySelector and getElementById methods in JavaScript. For more information about querySelector and getElementById methods in js, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!