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获取元素标签名并据此进行差异化处理的完整方案,希望对大家有所帮助。
作者最新文章
JavaScript零基础入门:从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript:void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化:FormData与URLSearchParams用法详解
2026-11-03 23:13:21
