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 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
js中有关IE版本检测
Jan 04 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
Vue打包后访问静态资源路径问题
Nov 08 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
新闻分类录入、显示系统
2006/10/09 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
详解JavaScript函数
2015/12/01 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python安装twisted的问题解析
2018/08/21 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
java程序员面试交流
2012/11/29 面试题
基层工作经验证明样本
2014/11/16 职场文书
2014年实习生工作总结
2014/11/27 职场文书
安全学习心得体会范文
2016/01/18 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python