For details, refer to the following eight methods for JS to obtain html dom elements: jsdom

For details, refer to the following eight methods for JS to obtain html dom elements: jsdom

What is html dom?

Document Object Model (Document Object Model) is a standard programming interface recommended by W3C for processing Extensible slogans. A simple understanding is that html dom is a standard for getting, modifying, adding, or deleting HTML elements. We use JavaScript to perform all operations on webpages Through DOM.

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

JS methods for obtaining DOM elements (8 types)

1. GetElementById)
2. GetElementsByName)
3. GetElementsByTagName)
4. GetElementsByClassName)
5. HTML metadata (document.doc umentElement)
6. Method for retrieving the body (document. body)
7. QuerySelector)
8. QuerySelectorAll)
   

Let's start to explain them one by one.

1. Get through ID (getElementById)

document.getElementById('id')

Usage:

1. The context must be document.

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

3. Only one element is returned, and null is returned if no element is found.

Pitfalls ~~ Pitfall ~ Pitfall ~ Pitfall ~ :

1. if multiple IDs exist, obtain only the first one, which is the first one. Generally, the same ID does not appear twice on the page.

2. in IE6 and 7, the name of the form element is obtained as the ID value. Therefore, you must pay attention to the definition.

3. IE6 and 7 are case-insensitive.

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

5. The context of the element obtained by ID can only be document. Why must the context be document? Because the getElementById method is on the prototype of the Document class, you may not understand it, so proceed.

2. Use the name attribute (getElementsByName)

document.getElementsByName('name')

Usage:

1. The context must be document.

2. parameters must be passed. The parameter is the name attribute of the retrieved element.

3. The returned value is an array of classes and no empty array is returned.

Pitfalls ~~ Pitfall ~ Pitfall ~ Pitfall ~ :

1. The result is an array of classes, not an array.

2. Only the form element can be obtained in IE browser. Of course, we usually only use it to obtain the form element. From ie10, it can be more than just the form element.

3. The context can only be document, for the same reason as getElementById.

3. Use the Tag Name (getElementsByTagName)

document.getElementsByTagName('p');var oDiv = document.getElementById('divId');oDiv.getElementsByTagName('p');

Usage:

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

2. the parameter is used to obtain the tag name attribute of an element, which is case-insensitive.

3. The returned value is an array of classes and no empty array is returned.

Pitfalls ~~ Pitfall ~ Pitfall ~ Pitfall ~ :

1. The result is an array of classes.

2. The context must not be a document, because the getElementsByTagName method is not only on the Document class prototype but also on the Element class prototype, so document and elements can use this method. If you still don't understand it, I will explain it at the end of the article.

4. getElementsByClassName)

Usage (similar to getElementsByTagName ):

1. The context can be a document or an element.

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

3. The returned value is an array of classes and no empty array is returned.

Pitfalls ~~ Pitfall ~ Pitfall ~ Pitfall ~ :

1. The result is an array of classes.

2. IE8 and earlier versions are not compatible. It is a pity that such a good method is not compatible.

5.obtain HTML metadata (document.doc umentElement)

Document.doc umentElement is used to obtain the html Tag.

6. Get the body (document. body)

Document. body is used to obtain the body tag.

7. Get an element (querySelector) through the selector)

Usage:

1. The context can be a document or an element.

2. the parameter is a selector, for example, "div. className ".

3. Only one element is returned.

Pitfalls ~~ Pitfall ~ Pitfall ~ Pitfall ~ :

This method is not compatible with IE7 and earlier versions, and it does not seem to be considered for companies that are compatible with IE7.

8. querySelectorAll)

Usage is similar to querySelector:

1. The context can be a document or an element.

2. the parameter is a selector, for example, "div. className ".

3. The returned value is an array of classes.

Pitfalls ~~ Pitfall ~ Pitfall ~ Pitfall ~ :

Same as querySelector, not compatible with IE7.

We have finished the 8 methods for getting DOM elements using native JS. Next we will explain why some methods can only be used on document.

Take div as an example. div is an instance of the HTMLDivElement class and document is an instance of HTMLDocument.

Their Inheritance relationships:

HTMLDivElement> HTMLElement> Element> Node> EventTarget

HTMLDocument> Document> Node> EventTarget

We all know that subclass inherits the parent class, so that subclass can use the attributes and methods of the parent class.

Their Inheritance relationships are Node and EventTarget, which means they can all use methods on Node and EventTarget.

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

GetElementById is only on the prototype of the Document class. HTMLDivElement does not inherit the Document class, so the div cannot use the getElementById method.
GetElementsByTagName is the prototype of the Document class and the Element class. Therefore, the getElementsByTagName method can be used for both the div and document classes.

Similarly.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.