JavaScript native gets document. Method of Element

The main purpose of writing this blog here today is to document the centralized approach to JavaScript native DOM selection.

1.document.getelementbyid. This method receives 1 parameters, that is, the ID of the DOM element (case-sensitive), which is the most commonly used method, and in this way the DOM lookup is the most efficient, so if you can use the ID to find the DOM element as far as possible to query the ID, the returned type is DOM element.

2.document.getelementsbytagname. This method receives 1 parameters, which need to be queried for the element label (case insensitive). Returns a collection of Htmlcollection. Because of the method item () and Nameditem () in Htmlcollection, there are 2 ways to take a specific element, for example: var tags = document.getelementsbytagname ("div");

• 1 value by item. The passed in is a numeric parameter that represents the position in the collection. var div1 = tags.item (0). Get the first element in tags. Of course, you can also use tags[0] to express.
• 2 values are obtained by Nameditem. The 1 parameters passed in can be the ID or name of the element that needs to be looked up. var div1 = Tags.nameditem ("name"). Take the ID or the element with name "name". You can also use the tags["name"] to indicate the same result.

3.document.getelementsbyname. The method receives 1 parameters, finds the element's name attribute, and is not an ID (case sensitive). Returns a collection of nodelist types. With the method item. The method used is similar to Method 2, but because there is no Nameditem method, the related element cannot be obtained by Nameditem and ["name"].

4.document.getelementsbyclassname. The method receives 1 parameters and needs to find the class name of the element. Can contain one or more types of strings, and the returned type is also a Htmlcollection collection. For example, to find elements with the red, blue class, you can use Document.getelementsbyclassname ("Red Blue"). The order of the class names doesn't matter. Then select an element in the same way as Method 2.

5.querySelector. The method receives 1 parameters, a CSS selector. If no matching element is found, the return is null, and if a matching element is found, the first matching element is returned. For example, var body = Document.queryselector ("Body"). If there is an error in the incoming CSS selector, an error is thrown.

6.querySelectorAll. The received parameter is also a CSS selector. The returned type is a NodeList collection. The underlying implementation is similar to a snapshot of a set of elements, not a dynamic query that constantly searches the document. If there is an error in the incoming CSS selector, an error is thrown.

　　

JavaScript native gets document. Method of Element