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 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
ES6中Class类的静态方法实例小结
Oct 28 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
原生JS实现相邻月份日历
Oct 13 Javascript
如何在JavaScript中正确处理变量
Dec 25 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实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python实现识别手写数字大纲
2018/01/29 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
NumPy中的维度Axis详解
2019/11/26 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
墨西哥网上超市:Superama
2018/07/10 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
转党组织关系介绍信
2014/01/08 职场文书
打架检讨书100字
2014/01/19 职场文书
销售目标责任书
2014/07/23 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js