Basic javascript search element details (Access Node) _ basic knowledge

Source: Internet
Author: User
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
Var oSpan = document. getElementById ('span1'); // search for the span Element
Alert (oSpan. innerHTML); // the content in the span tag is displayed.

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:

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.

Of course, we can use the length attribute to traverse nodes cyclically:

The Code is as follows:

Var oDiv = document. getElementsByTagName ('P ');
For (var I = 0; I <oDiv. length; I ++ ){
// Do something

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:

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 );

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:

/** 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;

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.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.