The get elements are simply divided into the following categories

  • Gets the element by ID
  • Gets the element by tag name
  • Gets elements by class name
  • Gets elements based on the specified selector
  • Gets the special element

Get elements by ID:document.getElementById('');

Retrieving the element by Id returns an element object.

Get elements by tag:document.getElementsByTagName('');

It returns a collection of objects with the specified label name, which is a pseudo-array, so if you want to manipulate the elements inside, you need to iterate.

Note:

  • Because it’s a complex number, so the element words in this method are complex numbers with s;
  • If the page does not have the element, an empty pseudo-array is returned;
  • If the page has only one LI, it returns a pseudo-array.

Get elements by class name:document.getElementsByClassName('');

H5 new method that returns a collection of element objects, also a pseudo-array.

Gets from the specified selector:document.querySelector(''); document.querySelectorAll('');

Get elements from CSS selectors (class name, Id). H5 is added. If it is obtained by class name or Id, it is preceded by the selector symbol ‘. ‘ ‘#’.

QuerySeleor: Returns the first element of the specified selector, or if there are more than one. QuerySelorAll: Returns a pseudo-array of all element objects for the specified selector.

Get special elements: body element, HTML element

document.body; Return the body element object.

document.html; Returns an HTML element object

While we’re at it, there’s another way to print besides log: console.dir (), which prints the element object we return, and gives you a more complete view of its properties and methods. Cool!

In the process of learning, I think it is particularly important to sort out and summarize knowledge, which can make our knowledge more solid and go further.

end…