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 相关文章推荐
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
php截取字符串函数分享
2015/02/02 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
php实现通过ftp上传文件
2015/06/19 PHP
php正则表达式学习笔记
2015/11/13 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
js返回顶部实例分享
2016/12/21 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
Python中暂存上传图片的方法
2015/02/18 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
酒店出纳岗位职责
2013/12/29 职场文书
聚美优品的广告词
2014/03/14 职场文书
刊首寄语大全
2014/04/11 职场文书
心理健康日活动总结
2014/05/08 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
争先创优公开承诺书
2014/08/30 职场文书
怎么写工作检讨书
2014/11/16 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书