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 相关文章推荐
js 实现复制到粘贴板的功能代码
May 13 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
JavaScript编写开发动态时钟
Jul 29 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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
使用URL传输SESSION信息
2015/07/14 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
Js动态创建div
2008/09/25 Javascript
javascript Excel操作知识点
2009/04/24 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
深入理解python中的atexit模块
2017/03/07 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
如何用Python绘制3D柱形图
2020/09/16 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
《燕子》教学反思
2014/02/18 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
招标授权委托书样本
2014/09/23 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2015年女职工工作总结
2015/05/15 职场文书
2016小学新学期寄语
2015/12/04 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL