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')

Usage:

1. The context must be a document.

2. Parameters must be passed. The parameters are of string type and are used to obtain the id of the element.

3. The return value only obtains one element, and returns null if it is not found.

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

1. If there are multiple ids, only the first one is obtained, that is, which one appears first . Generally, the same ID will not appear twice on the page.

2. In IE6 and 7, the name of the form element will be obtained as the ID value. So everyone must pay attention when defining these.

3. It is not case sensitive in IE6 and 7.

4. You can directly use the ID of the element to represent this element. (Not recommended in the project)

5. The context of the element obtained through ID can only be document. Why does the context have to be document? Because the getElementById method is on the prototype of the Document class. Maybe you don’t understand, so continue reading.

2. Through the name attribute (getElementsByName)

##

document.getElementsByName('name')

Usage:

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

IE browser

. 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.

3. By tag name (getElementsByTagName)

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

Usage:

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

Name method

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.

4. Through the class name (getElementsByClassName)

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.

5. Method to obtain html (document.documentElement)

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

6. Method to obtain body (document.body)

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

7. Get an element through the selector (querySelector)

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!