<!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. 转：界面之下：还原真实的 MVC、MVP、MVVM 模式

    前言 做客户端开发.前端开发对MVC.MVP.MVVM这些名词不了解也应该大致听过,都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式.网上很多文章关于这方面的讨论比较杂乱,各种MV*模式 ...

  2. 出现了内部错误-网站中X509Certificate2加载证书时出错

    今天给网站配置了加密证书文件,用类X509Certificate2加载证书文件时,一直报出现了内部错误,但是Demo中用控制台程序加载证书没任何问题 读取证书文件的语句: X509Certificat ...

  3. Python 字符串操作（string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等）

    去空格及特殊符号 s.strip().lstrip().rstrip(',') 复制字符串 #strcpy(sStr1,sStr2) sStr1 = 'strcpy' sStr2 = sStr1 sS ...

  4. 浅谈AOP

    AOP,面向切面编程,作为OOP的一种补充,在处理一些系统共有的业务,比如日志,事务等,提供了一种比OOP更佳的解决方案. 在OOP中,控制的粒度为对象,因此,对象中也就参杂这不属于本身业务主体的一下 ...

  5. 取消TableViewCell选中状态的外观变化

    tabelViewcell 使用Xib创建自定义外观的时候,在tableview选中的时候,cell的外观会发生变化,在定义Xib中如下图将选中的外观状态取消掉 也有其他选项,可以选择控制选中的时候的 ...

  6. c++ 宏定义声明类,并在类中实现回调

    #include <iostream> #include <windows.h> #include <string> using namespace std; ty ...

  7. 关于i++,++i 的理解

    由于经常有同学在遇到 i++.++i 时犯困难.所以举例说明一下: int i = 20;        int sum = i++ * 30; //这个等式中 i = 20        int s ...

  8. js通过注册表找到本地软件安装路径并且执行

    场景:用js执行本地的安装软件,如果不存在就执行安装 操作步骤: 1.前台js代码 <script type="text/javascript"> function e ...

  9. java类加载相关

    可参考一篇文章:http://www.tuicool.com/articles/QZnENv 下面题输出结果 package com.h3c.itac; public class Dervied ex ...

  10. 看看Maple T.A.的详细作用

    Maple T.A.是一个基于互联网的在线考试和智能评分系统,是Maplesoft公司 与美国数学协会(MAA)合作开发的成果,在全球拥有大量的院校用户.Maple T.A.提供了用户数据库.所见即所 ...