JS获取html元素的标记名实现方法

 更新时间:2016年10月08日 17:47:57   投稿:jingxian  
下面小编就为大家带来一篇JS获取html元素的标记名实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

常见的获取元素的方法有3种,分别是通过元素ID、通过标签名字和通过类名字来获取。

getElementById

DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象。使用的时候请注意区分大小写。

它是document对象特有的函数,只能通过其来调用该方法。其使用的方法如下:

document.getElementById('demo') //demo是元素对应的ID

该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用。

getElementsByTagName

该方法返回一个对象数组(准确的说是HTMLCollection集合,它不是真正意义上的数组),每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById,同样,该方法只提供一个参数,它的参数是指定标签的名字,示例代码如下:

 

document.getElementsByTagname('li') //li是标签的名字

需要注意的是,该方法除了能被document对象调用之外,还可以被普通的元素调用。示例如下:

原生DOM的话首先获取标签对象,id或者name或其他

例:

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

jQuery获取

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

如果已经获取到对象可以直接获取标记名

<p onclick="alert('您单击的是:'+this.tagName);">中华人民共和国</p>
var demo = document.getElementById('demo');
var lis = demo.getElementsByTagname('li');   

同样,该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用。

getElementsByClassName

除了通过指定标签获取元素外,DOM还提供了getElementsByClassName方法来获取指定class名的元素。不过由于该方法比较新,较老的浏览器还不支持,比如IE6。不过我们可以通过hack方式来弥补老浏览器缺陷。该方法调用的方式如下所示:

document.getElementsByClassName('demo')  //demo为元素指定的class名

和getElementsByTagname一样, 该方法除了能被document对象调用之外,还可以被普通的元素调用。

对于比较老的浏览器,比如IE6、7我们可以通过下面的hack方式来实现:

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

拓展

如果你不仅仅满足上面那些元素选择的方法,想和JQuery一样,能通过选择器来获取元素,实现的方法和上面的getElementsByClassName差不多,如果有兴趣自己可以实现一套选择器。不过我觉得有上面的三个方法再结合事件冒泡,已经够用了,毕竟这三种性能上算是优秀的。

以上就是小编为大家带来的JS获取html元素的标记名实现方法全部内容了,希望大家多多支持脚本之家~

相关文章

  • JavaScript实现数组在指定位置插入若干元素的方法

    JavaScript实现数组在指定位置插入若干元素的方法

    这篇文章主要介绍了JavaScript实现数组在指定位置插入若干元素的方法,涉及javascript中splice方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 微信小程序实现图片上传放大预览删除代码

    微信小程序实现图片上传放大预览删除代码

    这篇文章主要为大家详细介绍了微信小程序实现图片上传放大预览删除代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • javascript编程异常处理实例小结

    javascript编程异常处理实例小结

    这篇文章主要介绍了javascript编程异常处理的方法,结合实例形式分析总结了JavaScript编程中异常处理的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • Javascript insertAfter() 实现函数代码

    Javascript insertAfter() 实现函数代码

    DOM没有提供insertAfter()方法,我们可以自己扩展下。
    2011-10-10
  • 理解JS绑定事件

    理解JS绑定事件

    这篇文章主要帮助大家深入理解JS绑定事件,介绍了六种JS绑定事件的情况,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • Vue 组件渲染详情

    Vue 组件渲染详情

    这篇文章主要介绍了Vue 组件渲染详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • 如何通过JS实现日历简单算法

    如何通过JS实现日历简单算法

    这篇文章主要介绍了如何通过JS实现日历简单算法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • javascript实现可全选、反选及删除表格的方法

    javascript实现可全选、反选及删除表格的方法

    这篇文章主要介绍了javascript实现可全选、反选及删除表格的方法,实例展示了javascript针对表格全选、反选、删除、隔行变色、删除提示等常用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • JS沙箱模式实例分析

    JS沙箱模式实例分析

    这篇文章主要介绍了JS沙箱模式,结合实例形式分析了JS沙箱模式的原理与实现方法,需要的朋友可以参考下
    2017-09-09
  • 关于JavaScript命名空间的一些心得

    关于JavaScript命名空间的一些心得

    这篇文章主要介绍了关于JavaScript命名空间的一些心得,分别给出了顶级、多级命名空间的例子,需要的朋友可以参考下
    2014-06-06

最新评论