JS Gets the tag name implementation method of HTML element _javascript tips

There are 3 common ways to get elements, respectively, by element IDs, by tag names, and by class names.

getElementById

The DOM provides a method named getElementById that returns a Node object with its corresponding ID attribute. When used, be careful about case sensitivity.

It is a function specific to the document object that can only be invoked by it. The methods used are as follows:

document.getElementById (' demo ')//demo is the corresponding ID of the element

This approach is compatible with mainstream browsers, even ie6+, and can be used boldly.

getElementsByTagName

The method returns an array of objects (precisely the Htmlcollection collection, which is not really an array), and each object corresponds to an element of the given tag in the document. Similar to getElementById, the method provides only one argument, its argument is the name of the specified label, and the sample code is as follows:

document.getElementsByTagName (' Li ')//li is the name of the label

It should be noted that the method can be invoked by ordinary elements in addition to being invoked by the document object. Examples are as follows:

Native Dom first gets the label object, ID or name or other

Cases:

<p id= "Targetp" >2333333</p>
<script>
  var element = document.getElementById ("Targetp");
  var tagname = element.tagname;
  alert (tagname);
</script>

jquery get

$ ("#content-header"). Get (0). tagName

If you have already acquired the object, you can get the tag name directly

<p onclick= "alert (' You clicked: ' +this.tagname ');" > People's Republic of China </p>

var demo = document.getElementById (' demo ');
var lis = demo.getelementsbytagname (' li ');   

Similarly, the method is compatible with mainstream browsers, even including ie6+, and can be used boldly.

Getelementsbyclassname

In addition to getting the element by specifying a label, the DOM also provides a getelementsbyclassname method to get the element of the specified class name. However, because this method is relatively new, older browsers do not support, such as IE6. But we can make up for the old browser flaw by hack way. The method is called in the following way:

Document.getelementsbyclassname (' demo ')  //demo the class name specified for the element

As with getElementsByTagName, the method can be invoked by ordinary elements in addition to being invoked by the document object.

For older browsers, such as IE6, 7 we can do this in the following hack ways:

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 don't just do what the above elements choose, like jquery, you can get the element through the selector, and the method is similar to the getelementsbyclassname above, and if you are interested you can implement a set of selectors. But I think there are three ways to combine the above event bubbling, is enough, after all, these three performance is excellent.

The above is small series for everyone to bring JS get HTML element tag name implementation of the entire content, I hope we support cloud-Habitat Community ~