Detailed tutorial on how to obtain HTML DOM elements using JS

This article mainly introduces the 8 methods of obtaining HTML DOM elements in JS in detail. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

What is HTML DOM

Document Object Model (Document Object Model) is recommended by the W3C organization Standard programming interface for handling extensible markup languages. A simple understanding is that HTML DOM is a standard on how to obtain, modify, add or delete HTML elements. All operations we perform on web pages using JavaScript are performed through the DOM.

This article does not do in-depth research, but only summarizes various usages and pitfalls.

JS methods to get DOM elements (8 ways)

1. Get by ID (getElementById)

2. By name attribute (getElementsByName)

3. By tag name (getElementsByTagName)

4. By class name (getElementsByClassName)

5. Method to get html (document.documentElement)

6. Method to get body (document.body)

7. Get an element through the selector (querySelector)

8. Get a group of elements through the selector (querySelectorAll)
   

Let’s start explaining one by one.

1. Get by ID (getElementById)

##

document.getElementById('id')

2. Through the name attribute (getElementsByName)

##

document.getElementsByName('name')

1. The context must be a document.

2. Parameters must be passed, and the parameters are to obtain the name attribute of the element.

3. The return value is an array-like array. If not found, an empty array is returned.

pit~~pit pit~pit pit~pit pit~:

1. The obtained result is an array-like, not an array.

2. Only form elements can be obtained in

. Of course, we generally only use it to obtain form elements. Starting from ie10, it can be more than just form elements.
3. The context can only be document, for the same reason as getElementById.

document.getElementsByTagName('p');
var op = document.getElementById('pId');
op.getElementsByTagName('p');

1. The context can be a document or an element. Note that this element must exist.

2. The parameter is to obtain the tag name attribute of the element, which is not case-sensitive.

3. The return value is an array-like array. If not found, an empty array is returned.

pit~~pit pit~pit pit~pit pit~:

1. The obtained result is an array-like.

2. The context does not have to be a document, because the getElementsByTag

is not only on the prototype of the Document class but also on the prototype of the Element class, so both document and element can be Use this method. If you still don’t understand, I will explain it at the end of the article.

Usage (similar to getElementsByTagName):

1. The context can be document, can also be an element.

2. The parameter is the class name of the element.

3. The return value is an array-like array. If not found, an empty array is returned.

pit~~pit pit~pit pit~pit pit~:

1. The obtained result is an array-like.

2.IE8 and previous versions are not compatible. It's a pity that such a useful method is not compatible.

document.documentElement is specially used to obtain the html tag.

document.body is specially used to obtain the body tag.

Usage:

1. The context can be document, Can also be an element.

2. The parameter is a selector, such as: "p .className".

3. The return value only obtains one element.

pit~~pit pit~pit pit~pit pit~：

This method is not compatible with IE7 and previous versions, and it seems that companies that are compatible with IE7 are not considered now.

8. Get a set of elements through the selector (querySelectorAll)

Usage is similar to querySelector:

1. Context It can be a document or an element.

2. The parameter is a selector, such as: "p .className".

3. The return value is an array-like.

pit~~pit pit~pit pit~pit pit~:

Same as querySelector, not compatible with IE7.

Now that we have finished talking about the 8 methods of obtaining DOM elements using native JS, let’s talk about why some methods can only be used on documents.

Take p as an example. p is an instance of the HTMLpElement class, and document is an instance of HTMLDocument.

Their inheritance relationship:

HTMLpElement > HTMLElement > Element > Node > EventTarget

HTMLDocument > Document > Node > ; EventTarget

We all know that subclasses inherit the parent class, and the subclass can use the properties and methods of the parent class.

Their same inheritance relationship is Node and EventTarget, which means they can all use the methods on Node and EventTarget.

Such as nodeName, parentNode, etc. on Node, and addEventListener on EventTarget, etc.

getElementById is only on the prototype of the Document class. HTMLpElement does not inherit the Document class, so p cannot use the getElementById method.
getElementsByTagName is on the prototype of the Document class and also on the prototype of the Element class, so both p and document can use the getElementsByTagName method.

Others are the same.

The above is the detailed content of Detailed tutorial on how to obtain HTML DOM elements using JS. For more information, please follow other related articles on the PHP Chinese website!