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

有时候我们想获取到一个标签的名称，例如：<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获取元素的标签名实现方法全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • JS遍历页面所有对象属性及实现方法

    for...in循环的Javascript示例: <html> <head> <title>一个使用到for...in循环的Javascript示例</title> </head> <body> <script type="text/javascript"> // 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent. var myObject =

  • js 实现获取name 相同的页面元素并循环遍历的方法

    实例如下: <input type="hidden" name="blues" value="蓝色浏阳河之最"> <input type="hidden" name="blues" value="蓝色浏阳河之亲"> <input type="hidden" name="blues" value="蓝色浏阳河之

  • JS 使用for循环遍历子节点查找元素

    这篇文章主要介绍了JS 使用for循环配合数组遍历子节点查找元素 function nextChildNode(node,clazz,tagName){ var count= node.childElementCount; for(var i=0;i<count;i++){ if(node==undefined || node.children[i]==undefined){ continue; } if(clazz){ if(node.children[i].getAttribute('cla

  • js数组循环遍历数组内所有元素的方法

    例,for(){}遍历数组 复制代码 代码如下: <script type="text/javascript"> <!--var arr = new Array(13.5,3,4,5,6);for(var i=0;i<arr.length;i++){ arr[i] = arr[i]/2.0;}alert(arr); //--> </script> 例,for in循环遍历数组 复制代码 代码如下: <html><body>

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

    有时候我们想获取到一个标签的名称,例如:<div>a</div>得到"div".请看下面的例子: 页面上有一个class="a"的标签,可能是input,也可能是普通的div或者是span标签,现在我们要往这个标签加一个值"value1".如果是input则将其value属性设置为value1,div则将其innerHTML设置为value1.如何实现呢-- 如果纯js实现如下: //找到这个标签的代码略 this 代表找

  • 原生js获取元素样式的简单方法

    我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty

  • 浅谈JS获取元素的N种方法及其动静态讨论

    实际前端开发工作中,我们经常会遇到要获取某些元素,以达到更新该元素的样式.内容等目的.而文档对象模型 (DOM) 是HTML和XML文档的编程接口,它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容.DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合,它会将web页面和脚本或程序语言连接起来.也因此,JavaScript可以通过DOM API获取元素节点,方法有如下几种:其中querySelector()和quer

  • 原生JS获取元素的位置与尺寸实现方法

    1.内高度.内宽度: 内边距 + 内容框 clientWidth clientHeight 2.外高度,外宽度: 边框 + 内边距 + 内容框 offsetWidth offsetHeight 3.上边框.左边框 clientTop clientLeft 4.元素的大小及其相对于视口的位置 getBoundingClientRect() //x\y:元素的左上角和父元素左上角的距离 //width/height:边框 + 内边距 + 内容框 //top:元素的上边界和父元素上边界的距离 //le

  • js获取元素下的第一级子元素的方法(推荐)

    js childnodes获取的是所有的子元素,而我们实际要获取第一级子元素. function getChildren(obj){ var objChild = [] ; var objs = obj.getElementsByTagName('*'); for(var i=0,j=objs.length; i<j;++i){ if(objs[i].nodeType != 1){alert(objs[i].nodeType); continue ; } var temp = objs[i].p

  • js 获取元素所有兄弟节点的实现方法

    比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i

  • js获取元素的偏移量offset简单方法(必看)

    js获取元素的偏移量offset简单方法(必看)

    前言:以前一直是看别人写的,然后学习点东西,现在也把自己的学习记录下来,给大家一个学习的机会,欢迎大家多多评论和推荐哈,共同进步.竟然还有六个人关注我了 ,哈哈 开心.我会继续写下去的.. null和undefined都代表没有,但是null是属性存在值不存在,undefined是连这个属性都不存在 //例如 document.parentNode//浏览器天生自带的一个属性:父亲节点的属性 null (因为一个页面中的document已经是最顶级元素了,它没有父亲) document.pare

  • js获取元素外链样式的方法

    本文实例讲述了js获取元素外链样式的方法.分享给大家供大家参考.具体分析如下: 一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.ge

  • js获取元素的外链样式的简单实现方法

    一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.getComputedStyll(obj,null)[property]来获取外链样

  • js 获取元素下面所有li的两种方法

    js 获取元素下面所有的li 复制代码 代码如下: var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li"); 或 复制代码 代码如下: var div=document.getElementById('a'); var ul

随机推荐