当前位置：首页 > 资讯 > 技术文档

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

时间：2022-09-14 16:15 编辑：来源：阅读：
扫一扫，手机访问

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

常见的获取元素的方法有3种，分别是通过元素ID、通过标签名字和通过类名字来获取。 [b]getElementById[/b] DOM提供了一个名为getElementById的方法，这个方法将返回一个与之对应id属性的节点对象。使用的时候请注意区分大小写。它是document对象特有的函数，只能通过其来调用该方法。其使用的方法如下：

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

该方法兼容主流浏览器，甚至包括IE6+，可以大胆使用。 [b]getElementsByTagName[/b] 该方法返回一个对象数组（准确的说是HTMLCollection集合，它不是真正意义上的数组），每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById,同样，该方法只提供一个参数，它的参数是指定标签的名字，示例代码如下：

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

需要注意的是，该方法除了能被document对象调用之外，还可以被普通的元素调用。示例如下：原生DOM的话首先获取标签对象，id或者name或其他 [b]例：[/b]

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

[b]jQuery获取 [/b]

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

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

<p onclick="alert('您单击的是：'+this.tagName);">中华人民共和国</p>

var demo = document.getElementById('demo');
var lis = demo.getElementsByTagname('li');

同样，该方法兼容主流浏览器，甚至包括IE6+，可以大胆使用。 [b]getElementsByClassName[/b] 除了通过指定标签获取元素外，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;
    }
  }

[b]拓展[/b] 如果你不仅仅满足上面那些元素选择的方法，想和JQuery一样，能通过选择器来获取元素，实现的方法和上面的getElementsByClassName差不多，如果有兴趣自己可以实现一套选择器。不过我觉得有上面的三个方法再结合事件冒泡，已经够用了，毕竟这三种性能上算是优秀的。以上就是小编为大家带来的JS获取html元素的标记名实现方法全部内容了，希望大家多多支持编程素材网~

全部评论(0)

上一篇：Bootstrap table学习笔记（2）前后端分页模糊查询
下一篇：Div自动滚动到末尾的代码

资讯排行榜
更多>>