js获取元素的标签名实现方法


Posted in Javascript onOctober 08, 2016

有时候我们想获取到一个标签的名称,例如:<div>a</div>得到“div”。请看下面的例子:

页面上有一个class="a"的标签,可能是input,也可能是普通的div或者是span标签,现在我们要往这个标签加一个值“value1”。如果是input则将其value属性设置为value1,div则将其innerHTML设置为value1.如何实现呢……

如果纯js实现如下:

//找到这个标签的代码略 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);
}

以上就是小编为大家带来的js获取元素的标签名实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
document.documentElement和document.body区别介绍
Sep 16 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 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
微信小程序 前端源码逻辑和工作流详解
Oct 08 #Javascript
You might like
理解php原理的opcodes(操作码)
2010/10/26 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
js中replace的用法总结
2013/12/27 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
Python字典操作简明总结
2015/04/13 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python实现的config文件读写功能示例
2019/09/24 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python实现低通滤波器代码
2020/02/26 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
销售会计工作职责
2013/12/02 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
廉洁自律证明
2015/06/24 职场文书
技术入股合作协议书
2016/03/21 职场文书
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫