The native JS selectors include getElementById, getElementsByName, getElementsByTagName and getElementsByClassName. Next, I will introduce the usage of these four selectors one by one.
1.getElementById (get element through ID)
Usage: document.getElementById("Id");Id is the id attribute value of the element to be retrieved.
2.getElementsByName (get element through name attribute)
Usage: document.getElementsByName("Name");Name is the name attribute value of the element to be obtained. This method is generally applicable to submitting form data. When the element is form, img, iframe, applet, embed, or object, the 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.getElementsByTagName (get element by element name)
Usage: document.getElementsByTagName(TagName); TagName is the tag name of the element to be obtained. When TagName is *, it means to obtain all elements. The document can also be replaced with a DOM element, but in this way, you can only get the subset elements behind the DOM element.
4.getElementsByClassName (get elements through CSS class)
Usage: document.getElementsByClassName(ClassName);ClassName is the CSS class name to get the element. If you want to get multiple items at the same time, separate them with spaces after each CSS class. For example, document.getElementsByClassName("class2 class1") will get the element in class1 and class2 styles, and the document can also be replaced with a DOM element, so that only subset elements after the DOM element can be obtained.
<!DOCTYPE html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title></head><body><div>I am getting through tag</div><div id="box">I am getting through id</div><div>I am getting through class</div><form action="" name="box2">I am getting through name</form></body><script type="text/javascript"> var div = document.getElementsByTagName("div"); var box = document.getElementById("box"); var box1 = document.getElementsByClassName("box1"); var box2 = document.getElementsByName("box2");</script></html>The above is the full analysis of the js selector brought to you by the editor. I hope everyone can support Wulin.com more~