js中利用tagname和id获取元素的方法
2016-01-03 00:00
726 查看
本文分享了js中利用tagname和id获取元素的3种方法,供大家参考,具体内容如下
方法一:整体法,先获取所有的元素,再通过ai+-b的方法来算出需要的元素
方法二:数组法,在全局环境下建立空数组,遇到需要循环的结构时,在循环中获取元素,并放入数组
方法三:函数法,遇到相同的几组元素时,只操作一组元素,并用函数传参来实现所有的效果
具体代码如下
希望本文所述对大家学习掌握js获取元素的方法有所帮助。
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
js与jquery获取父元素,删除子元素的两种不同方法
JS获取节点的兄弟,父级,子级元素的方法
javascript获取隐藏元素(display:none)的高度和宽度的方法
一个JavaScript获取元素当前高度的实例
js实现从数组里随机获取元素
js获取json元素数量的方法
js jquery获取当前元素的兄弟级 上一个 下一个元素
方法一:整体法,先获取所有的元素,再通过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获取元素的方法有所帮助。
您可能感兴趣的文章:
js获取class的所有元素JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
js与jquery获取父元素,删除子元素的两种不同方法
JS获取节点的兄弟,父级,子级元素的方法
javascript获取隐藏元素(display:none)的高度和宽度的方法
一个JavaScript获取元素当前高度的实例
js实现从数组里随机获取元素
js获取json元素数量的方法
js jquery获取当前元素的兄弟级 上一个 下一个元素
相关文章推荐
- 详解js中class的多种函数封装方法
- 实例讲解避免javascript冲突的方法
- 基于javascript实现窗口抖动效果
- 全面理解Javascript闭包和闭包的几种写法及用途
- 使用 Sublime Text 做 Javascript 编辑器 - 集成 SublimeCodeIntel 实现代码智能提示及自动完成
- 使用 Sublime Text 做 Javascript 编辑器 - 集成 JSHint 问题检测工具
- JS编程练习
- 利用JSPTagEx开发单页面全程Ajax应用(附源码)
- JS 鼠标滚轮事件(mousewheel/DOMMouseScroll)
- package.json 字段全解析 share
- package.json 字段全解析 share
- JS入门总结
- (Frontend Newbie)JavaScript基础之常见数据类型
- js 闭包的理解
- 购物车角标JSBadgeView的基本使用
- 百度地图点击覆盖物,显示信息框js代码
- 265行JavaScript代码的第一人称3D H5游戏Demo【个人总结1】
- Javascript显示和隐式类型转换
- JSP标签
- 20151217JS便签