A detailed introduction to basic javascript search elements (access nodes)

Of course, these selectors are some extensions of jQuery. How do I 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:
Copy codeThe Code is as follows:
<Span id = "span1"> span tag </span>
<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:
Copy codeThe Code is as follows:
<Script>
Var oDiv = document. getElementsByTagName ('div '); // query all div elements and return a list of elements.
/* Operate on specific elements */
Alert (oDiv [0]. innerHTML) // the content of the first div is displayed.
Alert (oDiv. item (1). innerHTML) // the content in the second div is displayed.
</Script>

Of course, we can use the length attribute to traverse nodes cyclically:
Copy codeThe Code is 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 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.
Copy codeThe 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:
Copy codeThe 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.