<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>3种用tagname和id获取元素的方法</title>

<style>

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">分类名称</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>

　　

js中用tagname和id获取元素的3种方法的更多相关文章

  1. 原生j获取元素的几种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Js中去除数组中重复元素的6种方法

    方法一: Array.prototype.method1 = function(){ var arr=[]; //定义一个临时数组 for(var i = 0; i < this.length; ...

  3. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  4. JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  5. JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

  6. Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...

  7. js进阶 11-8 jquery如何获取元素相对于父元素的位置

    js进阶 11-8  jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...

  8. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  9. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

随机推荐

  1. Drawing in Singapore

    说到画画,其实很多人都会画.只是很多人都把这种潜能给埋起来了,没有特意的去开发出来.且不论画的好与不好,好看与不好看.自己把自己所想的东西方式表达出来,画画是一种方式.我不是科班出身,全凭自己感觉来的 ...

  2. SICAU教务系统登录密码加密算法的VB方式实现

    关于一个算法.这个算法是SICAU教务系统在账号登录时采取的一个加密算法.算法的实现并不复杂. 具体如下: Function Form1pwdvalue(ByVal pwdvalue As Strin ...

  3. php清理服务器无效软链接（源码）

    <?php /** * @desc 递归删除当前目录下的无效软连接 * @author mengdj<mengdj@outlook.com> 2014.10.03 1118 */ / ...

  4. 简单说说.Net中的弱引用

    弱引用是什么? 要搞清楚什么是弱引用,我们需要先知道强引用是什么.强引用并不是什么深奥的概念,其实我们平时所使用的.Net引用就是强引用.例如: Cat kitty = new Cat(); 变量ki ...

  5. Firefox页面缩放

    这一段firefox只能缩放文字,不能实现整个页面的缩放,各种尝试,最后发现是勾选了view--zoom--zoom text only!!(按alt键调出菜单)

  6. PHP去重算法的优化过程

    最近公司在做一个项目,需要对爬取到的数据进行去重,方法就是根据数据的id,去除掉id重复的数据. 下面是这个方法的演化过程. // 去重 $arr_id = array(); $LeTVFeedLis ...

  7. 学习JavaScript闭包

    作者: 阮一峰 日期: 2009年8月30日 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于Javascript初 ...

  8. 带额外toggle()功能的jquery库

    <html><head><meta http-equiv="Content-Type" content="text/html;charset ...

  9. C++大会感悟

    写在前面: 我是一名学生,在北邮读研,也是跨专业学的计算机,个人对服务器端编程感兴趣,平时主用c/c++,所以逮到这次机会就参加了这次大会. 先附几张合影: 正文: 这次参加c++大会也算是我最认真的 ...

  10. 学习笔记：Java的一些基础小知识之JVM与GC

      一.JVM是什么 Java虚拟机(英语:Java Virtual Machine,缩写为JVM),又名爪哇虚拟器,一种能够运行Java bytecode的虚拟机,以堆栈结构机器来进行实做.最早由太 ...