<!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. 创建WP8试用应用

    参考资料: 创建 Windows Phone 的试用应用 如何在 Windows Phone 应用中实现试用体验 Windows Phone 7 开发 31 日谈——第23日:提供试用版应用程序 对资 ...

  3. kindeditor-4.1.3工具使用技巧:如何在编辑区上传图片并保存绝对路径

    MVC项目开中用到了KindEditor图片上传工具,需要在编辑区内上传图片,并将图片的URL保存为符合如下格式地址,如http://192.168.0.111/uploadImg/imgName.j ...

  4. Python 端口，IP扫描

    Python Socket函数 (1)TCP发送数据时,已建立好连接,不需要指定地址.UDP是面向无连接,每次分别指定发给谁. (2)s.bind(address) 将套接字绑定到地址,在AF_INE ...

  5. iOS 10 新特性 大汇总 及iOS 10 的一些小问题和 xcode 8 的新版本小问题

    iOS 10正式版是很值得升级的,特别是那些不打算购买iPhone 7的老用户,毕竟新系统在体验.流畅性上都做了一些升级. 1.开放电话接口 支持垃圾电话提醒 对于使用iPhone的国人来说,这个功能 ...

  6. JS区分移动端和PC

    var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger& ...

  7. CentOS 7 防止端口自动关闭

    tl;dr firewall-cmd --permanent --zone=public --add-port=2888/tcp firewall-cmd --reload #重新载入服务 永久配置f ...

  8. AngularJS：自定义过滤器

    表达式:         {{ expression | filter1 | filter2 | ... }}         {{ expression | filterName : paramet ...

  9. effectiveC++ 内存管理 学习笔记

    1.尽量使用初始化列表而不要再构造函数里赋值,初始化顺序和声明的顺序一致,一些类型如const,引用等,必须使用初始化.对于非内部数据类型成员对象应当采用初始化表,以获取更高的效率.example:B ...

  10. .net 文件上传大小的设置

    直接在配置文件web.config 中进行如下配置,主要需要明白的就是 配置的 单位是 Byte,  所以一定计算清楚,不然会在这里纠结很久!!! <configuration> < ...