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实现的点击div区域外隐藏div区域
Jun 30 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python图像和办公文档处理总结
2019/05/28 Python
python:动态路由的Flask程序代码
2019/11/22 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
行政前台岗位职责
2013/12/04 职场文书
师范生自我鉴定
2014/03/20 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
django上传文件的三种方式
2021/04/29 Python
详解MindSpore自定义模型损失函数
2021/06/30 Python
JavaScript的Set数据结构详解
2022/02/18 Javascript
Mysql数据库group by原理详解
2022/07/07 MySQL