JavaScript与jQuery获取元素标签名的方法

作者:微光时间:2026-10-30 15:02:07浏览:538

本文介绍了如何在JavaScript和jQuery中获取HTML元素的标签名。通过localName和tagName属性,可以区分input、textarea等表单元素与普通容器元素,从而动态设置value或innerHTML。针对IE浏览器大小写敏感问题,提供了忽略大小写的比较方案,确保代码兼容性。

获取元素标签名的应用场景

在实际开发中,经常需要识别特定HTML元素的类型,例如从<div>a</div>中提取出“div”这一标签名称。以下是一个具体的应用场景示例。

假设页面中存在一个class为“a”的元素,它可能是input输入框,也可能是div或span等普通容器。现在需要向该元素注入值“value1”:若为input,则设置其value属性;若为div等容器,则设置其innerHTML。该如何实现这一逻辑?

原生JavaScript实现方式

若仅使用原生JavaScript实现,代码逻辑如下:

jQuery实现与IE兼容性处理


//找到这个标签的代码略 this 代表找到的标签对象
if(this.localName=="input"||this.localName=="textarea"){
  this.value="value1"
}else{
  this.innerHTML="value1";
}
使用jQuery实现如下:
 
if($(this)[0].tagName=="input"||$(this)[0].tagName=="textarea"){
  $(this).val(valueOut);
}else{
  $(this).html(valueOut);
}
但有个问题就是 ie返回的标签名称是大写的,所以保险起见 我们再写一个 忽略大小写的判断相等的函数:
 
var equalsIgnoreCase=function(str1, str2) {
  if (str1.toUpperCase() == str2.toUpperCase()) {
    return true;
  }
  return false;
};
 
if(equalsIgnoreCase($(this)[0].tagName,"input")||equalsIgnoreCase($(this)[0].tagName,"textarea")){
  $(this).val(valueOut);
}else{
  $(this).html(valueOut);
}

以上即为利用JavaScript获取元素标签名并据此进行差异化处理的完整方案,希望对大家有所帮助。

作者最新文章