<!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. DateTable利用NPOI导出Excel 公共方法

    protected void Export_Excel(DataTable dt) { string filename = "学生基本信息.xls"; ) { filename = ...

  2. C#获取存储过程返回值和输出参数值的方法

    //转自网络,先留个底 1.获取Return返回值 //存储过程 //Create PROCEDURE MYSQL // @a int, // @b int //AS // return @a + @ ...

  3. css 简析folat

    1.float?? 不知道大家是否还记得之前我们讲过页面是文档流,具体什么是文档流,我就不说了?于是我们页面布局如果用div的话,那么块状的元素是怎么排列的,什么叫块状自己去看? 如果我们呢用div布 ...

  4. html5shiv.js and respond.min.js

    因为用到这两个插件,所以记录下来.. html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持Css3 Media Quer ...

  5. #ifdef _DEBUG #undef THIS_FILE static char THIS_FILE[]=__FILE__; #endif

    情况1:#ifdef _DEBUGvirtual void AssertValid() const;                 //assert(断言)valid(有效的,正确的)virtual ...

  6. flex的兼容

    父容器的 display 属性: .box{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit br ...

  7. 对Java数组中去除重复项程序分析

    我作为一个Java菜鸟,只会用简单的办法来处理这个问题.如果有大神看到,请略过,感激不尽! 所以首先先分析这道题目:数组中重复的数据进行删除,并且要让数组里的数据按原来的顺序排列,中间不能留空. 既然 ...

  8. .保护Express应用程序

    毫无疑问,Node.js已经变的愈加成熟,尽管这样,开发者仍然缺乏大量的安全指南.在这篇文章中,我将分享一些有关Node.js安全要点给大家,希望大家能够谨记于心. 1.避免使用Eval Eval并不 ...

  9. eclipse插件开发入门

    2016-09-09 17:11:50 1. 概述 1.1 SWT/JFace 是Eclipse 的基础,Eclipse 的 Workbench 就是建立在 SWT/JFace 之上的.另外,JFac ...

  10. Linux VMware 克隆后无法启动eth0网卡

    引: VMware 下LINUX出现:Device eth0 does not seem to be present, delaying initialization.解决办法 VMWare 克隆 复 ...