Methods for getting elements in JavaScript _ javascript skills

This article introduces three common methods for getting elements in javascript: element ID, tag name, and class name. An example is provided, I hope you will like it. There are three common methods to obtain elements: element ID, tag name, and class name.

GetElementById

DOM provides a method named getElementById, which returns a node object corresponding to its id attribute. Note the case sensitivity when using it.

It is a function unique to the document object and can only be used to call this method. The method is as follows:

The code is as follows:

Document. getElementById ('demo') // The demo is the ID of the element.

This method is compatible with mainstream browsers, including IE6 +, and can be used boldly.

GetElementsByTagName

This method returns an array of objects (the HTMLCollection set, which is not an array in the true sense). each object corresponds to an element with a given tag in the document. Similar to getElementById, this method provides only one parameter. its parameter is the name of the specified tag. the sample code is as follows:

The code is as follows:

Document. getElementsByTagname ('Lil') // li indicates the label name.

Note that this method can be called by common elements in addition to the document object. Example:

The code is as follows:

Var demo = document. getElementById ('demo ');
Var lis = demo. getElementsByTagname ('Lil ');

Similarly, this method is compatible with mainstream browsers, including IE6 +, and can be used boldly.

GetElementsByClassName

In addition to the specified tag, DOM also provides the getElementsByClassName method to get the element of the specified class name. However, this method is relatively new and is not supported by older browsers, such as IE6. However, we can use the hack method to make up for the defects of the old browser. This method is called as follows:

The code is as follows:

Document. getElementsByClassName ('demo') // The demo is the class name specified by the element.

Like getElementsByTagname, this method can be called by common elements in addition to the document object.

For older browsers, such as IE6 and 7, we can use the following hack method:

The code is as follows:

Function getElementsByClassName (node, classname ){
If (node. getElementsByClassName ){
Return node. getElementsByClassName (classname );
} Else {
Var results = [];
Var elems = node. getElementsByTagName ("*");
For (var I = 0; I <elems. length; I ++ ){
If (elems [I]. className. indexOf (classname )! =-1 ){
Results [results. length] = elems [I];
}
}
Return results;
}
}

Expansion

If you are not only satisfied with the above element selection method, you can get the element through the selector like JQuery. the implementation method is similar to the above getElementsByClassName. if you are interested, you can implement a set of selector. However, I think the above three methods combined with event bubbling are enough. after all, these three methods are excellent in performance.

The above is all the content of this article. I hope it will help you.