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


Posted in Javascript onOctober 08, 2016

常见的获取元素的方法有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 相关文章推荐
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
Jqprint实现页面打印
Jan 06 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 Javascript
js获取元素的标签名实现方法
Oct 08 #Javascript
什么是JavaScript中的结果值?
Oct 08 #Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 #Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 #Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 #Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 #Javascript
Javascript中常用的检测方法小结
Oct 08 #Javascript
You might like
PHP 批量更新网页内容实现代码
2010/01/05 PHP
PHP微信支付开发实例
2016/06/22 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
JavaScript中的私有成员
2006/09/18 Javascript
JS支持带x身份证号码验证函数
2008/08/10 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
python使用Tesseract库识别验证
2018/03/21 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
法律专业自我鉴定
2013/10/03 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
幼儿园个人总结
2015/02/28 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
英镑符号 £
2022/02/17 杂记
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python