js中利用tagname和id获取元素的方法


Posted in Javascript onJanuary 03, 2016

本文分享了js中利用tagname和id获取元素的3种方法,供大家参考,具体内容如下

方法一:整体法,先获取所有的元素,再通过ai+-b的方法来算出需要的元素

方法二:数组法,在全局环境下建立空数组,遇到需要循环的结构时,在循环中获取元素,并放入数组

方法三:函数法,遇到相同的几组元素时,只操作一组元素,并用函数传参来实现所有的效果

具体代码如下

<!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获取元素的方法有所帮助。

Javascript 相关文章推荐
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
如何用JS实现网页瀑布流布局
Apr 24 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 #Javascript
基于javascript实现简单计算器功能
Jan 03 #Javascript
详解Javascript事件驱动编程
Jan 03 #Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 #Javascript
js实现搜索框关键字智能匹配代码
Mar 26 #Javascript
javascript合并表格单元格实例代码
Jan 03 #Javascript
JS Array.slice 截取数组的实现方法
Jan 02 #Javascript
You might like
php 动态执行带有参数的类方法
2009/04/10 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python关闭windows进程的方法
2015/04/18 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
Python模块 _winreg操作注册表
2020/02/05 Python
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
《荷花》教学反思
2014/04/16 职场文书
户外活动总结
2015/02/04 职场文书
班主任寄语2015
2015/02/26 职场文书
音乐剧猫观后感
2015/06/04 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis