Of course these selectors are some of the methods of the jquery extension, so how do you find elements when using native JS? Let's have a simple comb today.
The DOM defines a variety of ways to find elements, in addition to our commonly used getElementById (), as well as getElementsByTagName () and Getelementsbyname (). Using these methods, we can find any HTML element in an HTML document.
getElementById ()
First take a look at getElementById (), which is simple enough to pass in the id attribute value of the HTML tag in the parameter, because the ID in the HTML page is unique, so the method returns a single Element object. For example:
Copy Code code as follows:
<span id= "Span1" >span tags </span>
<script>
var Ospan = document.getElementById (' span1 '); Finding span elements
alert (ospan.innerhtml); Eject the contents of the span label
</script>
getElementsByTagName ()
The getElementsByTagName () parameter is passed in an HTML tag name that returns a list of all the matching elements in the HTML document, which has the attributes of a partial array and is therefore called an array of classes. When we want to manipulate a particular element, we can use an array index or item () to implement it, for example:
Copy Code code as follows:
<script>
var odiv = document.getelementsbytagname (' div '); Finds all DIV elements, returns a list of elements
/* operation of specific elements * *
Alert (odiv[0].innerhtml)//Eject the contents of the first div
Alert (Odiv.item (1). InnerHTML)//Pop up the contents of the second div
</script>
Of course, we can iterate through the nodes through the length property:
Copy Code code as follows:
<script>
var odiv = document.getelementsbytagname (' div ');
for (var i = 0; i < odiv.length; i++) {
Do something
}
</script>
Getelementsbyname ()
Getelementsbyname () is often used to find form elements, the name attribute value of an incoming HTML tag in a parameter, and because the name value of multiple HTML tags in a document may be the same (such as a radio button), the method returns a list of elements. The specific method of operation and getElementsByTagName () similar, here is not to repeat.
Copy Code code as follows:
<script>
var oipt= document.getelementsbyname (' City '); Find an element with name value of city
alert (Oipt[0].value);
Alert (Oipt.item (1). value);
</script>
Getbyclass ()
Although several of the above methods have been used to meet the common needs, for more convenient access to element nodes, we typically encapsulate a method of finding elements by class:
Copy Code code as follows:
<script>
/** Getbyclass **/
function Getbyclass (oparent, Sclass) {
var Aele = oparent.getelementsbytagname (' * ');
var re = new RegExp (' \\b ' + sclass + ' \\b ');
var aresult = [];
for (var i = 0; i < aele.length; i++) {
if (Re.test (Aele[i].classname)) {
Aresult.push (Aele[i]);
}
}
return aresult;
}
</script>
Getbyclass needs to pass in two parameters, where oparent is the reference node, that is, to find the element in the Oparent node, sclass to the value of the element class to find. By looping through the Oparent HTML tag's class value to the incoming Sclass value of one by one, the qualifying will be deposited into the array Aresult and finally returned to the array.
In addition, the reason why the matching is not directly with aele[i].classname = = Sclass, is to avoid the label of the class value of multiple, the occurrence of matching failure.
