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 相关文章推荐
css结合js制作下拉菜单示例代码
Feb 27 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
Vue自定义render统一项目组弹框功能
Jun 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
如何删除多级目录
2006/10/09 PHP
用PHP和ACCESS写聊天室(五)
2006/10/09 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php给图片加文字水印
2015/07/31 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
如何设置Java的运行环境
2013/04/05 面试题
公司拓展活动方案
2014/02/13 职场文书
生物工程专业求职信
2014/09/03 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
2015年人事科工作总结
2015/04/28 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
小学新课改心得体会
2016/01/22 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书