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中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
vue实现微信分享功能
Nov 28 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 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函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
常用简易JavaScript函数
2009/04/09 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python super函数使用方法详解
2020/02/14 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
绿色环保口号
2014/06/12 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
学习十八大宣传标语
2014/10/09 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
三八妇女节主持词
2015/07/04 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS