Current location - Quotes Website - Personality signature - What are the ways to get an element with javascript?
What are the ways to get an element with javascript?

1. Select elements by ID (getElementById)

1) Usage method: document.getElementById("domId")

Among them, domId is the element to be selected. id attribute value

2) Compatibility: The implementation of the getElementById method by IE browsers lower than IE8 does not distinguish the case of the element ID number, and will return elements matching the name attribute.

2. Select elements by name (getElementsByName)

1) Usage method: document.getElementsByName("domName")

Among them, domName is to be selected The name attribute value of the element

2) Description: a. The return value is a nodeList collection (different from Array)

b. Unlike the ID attribute, the name attribute is only available in a few DOM Valid in elements (form form, form element, iframe, img). This is because the name attribute was created to facilitate submitting form data.

c. When setting the name attribute for form, img, iframe, applet, embed, and object elements, an attribute named after the name attribute value will be automatically created in the Document object. 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 Tag name of DOM element

2) Description: a. The return value is a nodeList collection (different from Array)

b. This method can only select the descendants of the element that calls this method. element.

c. tagName is not case-sensitive

d. When tagName is *, it means selecting all elements (subject to b. rules)

e. HTMLDocument Some shortcut properties will be defined to access label nodes. For example: the images, forms, and links attributes of document point to the set of ,

, and tag elements, while document.body and document.head always point to the body and head tags (when the head tag is not declared, 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 (spaces are used between multiple class names, and they can be separated by multiple spaces), < /p>

For example, element.getElementsByClassName("class2 class1") will select elements whose descendants of elements have both class1 and class2 styles applied (the style names are not in 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: browsers of IE8 and below do not implement the getElementsByClassName method

5. Select elements through CSS selectors

1) How to use :document.querySelectorAll("selector")

Among them, selector is a legal CSS selector

2) Description: a. The return value is a nodeList collection (different from Array)< /p>

3) Compatibility: IE8 and below browsers only support CSS2 standard selector syntax