Js process of operating DOM objects

Let me summarize the process of Js operation DOM object. I took a look at the speed of various methods of selecting elements. The native method is nearly 8 times faster than the jQUERY block, and IE8 is the slowest. , IE9 is three times faster than IE8.

Method to select document elements:

1. Select elements by ID (getElementById)
1) Usage method: document. getElementById("domId")
Where, domId is the id attribute value of the element to be selected
2) Compatibility: IE browsers that are lower than IE8 version do not distinguish the implementation of the getElementById method The element ID number is case-sensitive, and elements matching the name attribute will be returned.

2. Select elements by name (getElementsByName)
1) Usage method: document.getElementsByName("domName")
Among them, domName is the name attribute value of the element to be selected
2 ) Description: a. The return value is a nodeList collection (different from Array)
                  b. Unlike the ID attribute, the name attribute is only valid in a few DOM elements (form form, form element, iframe, img). This is because the name attribute was created to facilitate submitting form data.                                                                                                                                                                                                                                                                                                       ​ Therefore, the corresponding dom object can be referenced through document.domName 3) Compatibility: Elements with matching ID attribute values ​​in IE will also be returned together

3. Select elements by tag name (
getElementsByTagName
） 1) Usage method: element.getElementsByTagName("tagName") Among them, element is a valid DOM element (including document)
tagName is the tag name of the DOM element
2) Description : a. The return value is a nodeList collection (different from Array)
                b. This method can only select descendant elements of the element that calls this method.
C. Tagname does not distinguish between la between? For example: the images, forms, and links attributes of document point to the collection of ,

, tag elements, while document.body and document.head always point to the body and head tags (when the head declaration is not shown tag, the browser will also create the document.head attribute)

4. Select elements through CSS classes (getElementsByClassName)
1) Usage method: element.getElementsByClassName("classNames")
Among them, element is a valid DOM element (including document)
            classNames is a combination of CSS class names (multiple class names are separated by spaces, and can be separated by multiple spaces),
                                                                                                                                                                         ") will select elements whose descendants of elements have both class1 and class2 styles applied (the style names are in no particular order)
2) Description: a. The return value is a nodeList collection (different from Array)
b. This method can only select descendant elements of the element that calls this method.
3) Compatibility: IE8 and below browsers do not implement getElementsByClass
Name method


5. Select elements through CSS selector
1) Usage method: document.querySelectorAll("selector")
Wherein, selector is a legal CSS selector 2) Description: a. The return value is a nodeList collection (different from Array) 3) Compatibility: IE8 and below browsers only support CSS2 standard selector syntax



I believe you have mastered the method after reading these cases. Please pay attention for more exciting information. Other related articles on php Chinese website!

Related reading:

How to use CSS to hide the text content of the image background

How to use Vue+CSS3 to create interactive effects

How to make DIV adaptive in height

The above is the detailed content of Js process of operating DOM objects. For more information, please follow other related articles on the PHP Chinese website!