1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

js中tagname使用详解

DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2>,其中h2是元素节点,class是属性节点,head是文本节点,tagName和nodeName的语义是一样的,都是返回所包含标签的名称,例如上面的h2标签,都是返回h2,但是tagName只能在元素标签上使用,而nodeName则可以在所有的节点上使用。

1、利用document.getElementById()获取到dom元素

2、获取dom元素的属性tagName

3、如果tagName是INPUT,可以再利用元素的type属性判断具体是哪一种INPUT

示例:

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  body{      margin: 0;  }  ul{      margin: 0;      padding: 0;      list-style: none;  }  h1{      margin: 0;  }  </style>  </head>  <body>  <div class="box" id="box">      <h1 class="box-tit">tagname详解</h1>      <ul class="box-list" id="box-list">          <li class="box-listI">              <input class="box-listI-input">              <button>保存</button>              <button>取消</button>          </li>          <li class="box-listI">              <input class="box-listI-input">              <button>保存</button>              <button>取消</button>          </li>          <li class="box-listI">              <input class="box-listI-input">              <button>保存</button>              <button>取消</button>          </li>      </ul>  </div>  <script>  //[1]整体法,先获取所有的元素,再通过ai+-b的方法来算出需要的元素  var oList = document.getElementById('box-list');  var aInput = oList.getElementsByTagName('input');  var aBtn =oList.getElementsByTagName('button');     for(var i = 0; i < aBtn.length; i++){      aBtn[i].index = i;  }  for(var i = 0; i < aInput.length; i++){      //确定按钮      aBtn[2*i].onclick = function(){          aInput[this.index/2].disabled = true;      }      //取消按钮      aBtn[2*i+1].onclick = function(){          aInput[(this.index-1)/2].disabled = false;          aInput[(this.index-1)/2].value = '';          console.log(1);      }  }  //[2]数组法,在全局环境下建立空数组,遇到需要循环的结构时,在循环中获取元素,并放入数组  var oList = document.getElementById('box-list');  var aIn = oList.getElementsByTagName('li');  var aInput = [];  var aBtnY = [];  var aBtnX = [];  for(var i = 0; i < aIn.length; i++){      aInput[i] = aIn[i].getElementsByTagName('input')[0];      aBtnY[i] = aIn[i].getElementsByTagName('button')[0];      aBtnX[i] = aIn[i].getElementsByTagName('button')[1];         aBtnY[i].index = aBtnX[i].index = i;      //确定按钮      aBtnY[i].onclick = function(){          aInput[this.index].disabled = true;      }      //取消按钮      aBtnX[i].onclick = function(){          aInput[this.index].disabled = false;          aInput[this.index].value = '';          console.log(2);      }    }     //[3]函数法,遇到相同的几组元素时,只操作一组元素,并用函数传参来实现所有的效果  var oList = document.getElementById('box-list');  var aIn = oList.getElementsByTagName('li');     function fn(i){      var oInput  = aIn[i].getElementsByTagName('input')[0];      var oBtnY = aIn[i].getElementsByTagName('button')[0];      var oBtnX = aIn[i].getElementsByTagName('button')[1];      //确定按钮      oBtnY.onclick = function(){          oInput.disabled = true;      }      //取消按钮      oBtnX.onclick = function(){          oInput.disabled = false;          oInput.value = '';          console.log(3);      }        }  for( var i = 0; i < aIn.length; i++){      fn(i);  }  </script>  </body>  </html>

效果:

原文链接:https://www.qiquanji.com/post/8066.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: