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实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
jquery处理json数据实例分析
2014/06/03 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
详解JS面向对象编程
2016/01/24 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
使用Javascript简单计算器
2018/11/17 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
python原始套接字编程示例分享
2014/02/21 Python
如何用python整理附件
2018/05/13 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
python中的colorlog库使用详解
2019/07/05 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
python自动生成sql语句的脚本
2021/02/24 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
婚礼司仪主持词
2014/03/14 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
战友聚会致辞
2015/07/28 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
如何使用php生成zip压缩包
2021/04/21 PHP
详解php中流行的rpc框架
2021/05/29 PHP
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers