If jQuery is commonly used, we know that jQuery has a very powerful selector to find elements (also called access nodes). For example: basic selector, hierarchy selector, filter selector, attribute selector and so on. Of course, these selectors are some extensions of jQuery. How can we find elements when using native js? Let's take a look at it today.
DOM defines multiple methods for searching elements. Apart from getElementById (), getElementsByTagName () and getElementsByName () are also commonly used (). Using these methods, we can find any html element in the html document.
GetElementById ()
First, let's take a look at getElementById (). This method is very simple. You only need to input the id attribute value of the html tag in the parameter. Because the id in the html page is unique, this method returns a single element object. For example:
The Code is as follows:
Span tag
Script
Var oSpan = document. getElementById ('span1'); // search for the span Element
Alert (oSpan. innerHTML); // the content in the span tag is displayed.
Script
GetElementsByTagName ()
The getElementsByTagName () parameter requires an html Tag name, which returns a list Of all matched elements in the html document. This list has the features of some arrays, therefore, it is also called a class array. When we want to operate a specific element, we can use an array index or item (), for example:
The Code is as follows:
Script
Var oDiv = document. getElementsByTagName ('P'); // query all p elements and return a list of elements.
/* Operate on specific elements */
Alert (oDiv [0]. innerHTML) // the content of the first p is displayed.
Alert (oDiv. item (1). innerHTML) // the content in the second p is displayed.
Script
Of course, we can use the length attribute to traverse nodes cyclically:
The Code is as follows:
Script
Var oDiv = document. getElementsByTagName ('P ');
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 the input html tag in the parameter may be the same as the name values of Multiple html tags in the document (such as single-choice buttons ), therefore, this method returns an element list. The specific operation method is similar to getElementsByTagName (), which is not described here.
The Code is as follows:
Script
Var oIpt = document. getElementsByName ('city'); // you can specify the name of an element whose name is city.
Alert (oIpt [0]. value );
Alert (oIpt. item (1). value );
Script
GetByClass ()
Although the above methods can already meet common requirements, to facilitate Element Node access, we generally encapsulate a method to search for elements through class:
The Code is 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 requires two parameters. oParent is the reference node, that is, the oParent node searches for elements, and sClass is the value of the element class to be searched. Cyclically compare the class value of the html Tag in oParent with the passed sClass value. The qualified class value is saved to the array aResult, and then the array is returned.
In addition, the reason why regular expressions are used for matching is not directly using aEle [I]. className = sClass is to avoid invalid matching when there are multiple class values in the tag.
