<!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. Nodejs windows的安装

    0.下载地址: http://nodejs-org.qiniudn.com/ https://nodejs.org/download/ https://nodejs.org/en/ 1.基本就是一路N ...

  2. JS生成随机字符串

    function randomString(len) { len = len || 32; var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxy ...

  3. dotnet webapi 中添加Swagger文档

    首先添加"SwaggerGenerator": "1.1.0","SwaggerUi": "1.1.0" 需要注意的是这 ...

  4. .net工具

    程序名称 作者 说明 文件结构与元数据查看看 AssemblyView1.0   可以查看.net平台下exe,dll源代码的类结构,比如变量,属性,函数,事件的定义. Anakrino   源代码开 ...

  5. 格式化input输入内容（金额）

    项目中要用到格式化金额输入框,要求每三个数字用逗号分割开. 添加一个directive angular.module('myApp.directives', []) .directive('filte ...

  6. Jquery.load() 使用

    调用load方法的完整格式是:load( url, [data], [callback] ) url:是指要导入文件的地址. data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导 ...

  7. spark 大数据 LR测试

    #!/bin/bash size="120Y*10W"date1=`date +%F_%H-%M-%S`config="spark-submit \ --jars /da ...

  8. WPF整理-处理没有注意到的异常

    在.NET中,我们使用try-catch-finally来处理异常.但,当一个Exception抛出,抛出Exception的代码又没有被try包围时,程序就崩溃了. 这些异常往往是你没有注意到的.在 ...

  9. PHP基础知识之变量

    定义: 变量用一个美元符号后面跟变量名来表示,如:$user 变量引用赋值: 引用赋值用一个&后面跟源变量名来表示,如:$copy=&$user(注:$bar = &(24 * ...

  10. Mac上开启Web服务

    $ sudo apachectl start$ httpd -v /Library/WebServer/Documents