There are three common ways to obtain elements, namely, namely, namely, name through element ID, name through tag and name through class.
getElementById
DOM provides a method called getElementById, which will return a node object with the corresponding id attribute. Please be careful to be case sensitive when using it.
It is a function unique to the document object and can only be called through it. The methods used are as follows:
The code copy is as follows:
document.getElementById('demo') //demo is the ID corresponding to the element
This method is compatible with mainstream browsers, even including IE6+, and can be used boldly.
getElementsByTagName
This method returns an array of objects (to be precise, HTMLCollection collection, it is not a true array), each object corresponds to an element with a given tag in the document. Similar to getElementById, this method only provides one parameter, and its parameter is the name of the specified tag. The example code is as follows:
The code copy is as follows:
document.getElementsByTagname('li') //li is the name of the tag
It should be noted that in addition to being called by document objects, this method can also be called by ordinary elements. Examples are as follows:
The code copy is as follows:
var demo = document.getElementById('demo');
var lis = demo.getElementsByTagname('li');
Similarly, this method is compatible with mainstream browsers, even including IE6+, and can be used boldly.
getElementsByClassName
In addition to obtaining elements by specifying tags, the DOM also provides the getElementsByClassName method to get the element with the specified class name. However, because this method is relatively new, older browsers do not support it, such as IE6. However, we can make up for the shortcomings of old browsers through hack. The method is called as follows:
The code copy is as follows:
document.getElementsByClassName('demo') //The class name specified by the demo is
Like getElementsByTagname, this method can be called by ordinary elements in addition to being called by document objects.
For older browsers, such as IE6 and 7, we can implement them through the following hack:
The code copy 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;
}
}
expand
If you are not only satisfied with the above element selection methods, you want to obtain elements through selectors like JQuery. The implementation method is similar to the above getElementsByClassName. If you are interested, you can implement a set of selectors. However, I think the above three methods combined with event bubbles is enough, after all, these three performances are excellent.
The above is the entire content of this article, and I hope it will be helpful to everyone.