javascript根据元素自定义属性获取元素,操作元素
写在前面:给某个或多个元素自定义属性data-tar,想获取data-tar='123'的元素来进行进一步的操作,如何实现?
function getElementByAttr(tag,attr,value) { var aElements=document.getElementsByTagName(tag); var aEle=[]; for(var i=0;i<aElements.length;i++) { if(aElements[i].getAttribute(attr)==value) aEle.push( aElements[i] ); } return aEle; } window.onload=function() { var aDiv=getElementByAttr('div','data-id','123456');//返回data-id为123456的div集合 for(var i=0;i<aDiv.length;i++){ aDiv[i].style.backgroundColor='#ccc'; }}
1.定义函数getElementByAttr,该函数有三个参数tag,attr,value分别是标签 自定义属性 属性值
2.找出和目标元素同类型的元素存放在变量aElements中
3.定义个数组存放即将筛选出的元素
4.遍历同标签的元素,获取元素的自定义属性并进行判断
5.如果值等于目标元素的值,意味着元素找到
6.将符合条件的元素存放在数组中
7.如果没找到,直接return退出
8.函数调用,存放在另一个变量里,遍历循环,进行进一步操作
javascript根据元素自定义属性获取元素,操作元素的更多相关文章
- 从零开始学 Web 之 jQuery(二)获取和操作元素的属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Robotium源码解读-native控件/webview元素的获取和操作
目前比较有名的Uitest框架有Uiautomator/Robotium/Appium,由于一直对webview元素的获取和操作比较好奇,另外Robotium代码量也不是很大,因此打算学习一下. 一. ...
- [Web 前端] 023 js 的流程控制、循环和元素的获取、操作
1. Javascript 流程控制 用于"基于不同条件执行不同的动作"的场合 1.1 if 语句 三种形式 // 第一种 if... // 第二种 if... else ... ...
- jquery1.11 操作checkbox:全选、取消全选、获取选择元素、获取取消选择元素(总结)
jquery1.11.1版本完成对checkbox的操作 1. 使用属性prop设置选中状态 2.使用:checked和:not(:checked)获取选中的元素 源码: <!DOCTYPE h ...
- JQ 获取下一个元素和获取下一个元素的[指定]子元素
<script type="text/javascript"> $(function () { $("#div1").next().addClass ...
- javascript 操作元素属性的方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 前端JavaScript入门——JavaScript变量和操作元素
变量JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定. 定义变量需要用关键字 ‘var’: var a = 123; var b = 'asd'; //同时定义多个 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
随机推荐
- 【转】视差滚动(Parallax Scrolling)效果的原理和实现
原文:http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html 视差滚动(Parallax Scrolling)是指让多层背景以不同 ...
- OrchardNoCMS
基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--BootStrap 按照几个月之前的计划,也应该写一个使用Bootstrap作为OrchardNoCMS的UI库.之前这 ...
- 2014.3.5-C语言学习小结
知识点: 1.结构体 struct 2.联合体 union 3.枚举 4.结构.联合与函数 =========================== 结构体 思考:如果现在希望保存一个学生的信息,该如何 ...
- linux中的"32位"与"64位"
linux内核学习之三:linux中的"32位"与"64位" 在通用PC领域,不论是windows还是linux界,我们都会经常听到"32位" ...
- queue,指针求最短路的区别
这里以spfa为例://都用邻接表存边: 指针: int h=1,t=1; q[h]=x; while(h<=t){ int u=q[h]; vis[u]=0; for(int i=head[u ...
- C#socket通信1
.net平台下C#socket通信(上) 完全是基础,新手可以随意看看,大牛可以关闭浏览页了,哈哈. 在开始介绍socket前先补充补充基础知识,在此基础上理解网络通信才会顺理成章,当然有基础的可以跳 ...
- [转]Creating an iPhone Daemon
ref: http://chrisalvares.com/blog/7/creating-an-iphone-daemon-part-1/ http://chrisalvares.com/blog/3 ...
- session验证登陆- 页面跳转
用session验证登陆,当用户想访问一个页面时由于没有登录,就跳转到登录页面,登录后跳转到用户请求的页面,在session跳转中传上次请求的页面. 怎么获得这个url值并跳转到该页面呢? 以此跳转 ...
- linux下面配置安装nodejs+npm
linux下 多亏这一篇文章= =我就卡死在文章所说的这个点里 附大牛链接:http://blog.sitearth.com/nodejs%E4%B8%8A%E4%BD%BF%E7%94%A8mong ...
- JAVA多线程经典问题 -- 生产者 消费者
工作2年多来一直也没有计划写自己的技术博客,最近辞职在家翻看<thingking in JAVA>,偶尔看到了生产者与消费者的一个经典的多线程同步问题.本人在工作中很少使用到多线程以及高并 ...