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正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
随机推荐
- 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)
placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...
- sqlclr返回数据集案例
----------------------------------------------返回一张表,但只有一条数据,最后一次设置的. [Microsoft.SqlServer.Server.Sql ...
- MIT Introduction to Computer Science and Programming (Lesson one )
MIT Introduction to Computer Science and Programming (Lesson one ) 这篇文是记载 MIT 计算机科学及编程导论 第一集 的笔记 Les ...
- noip推荐系列:汽艇[贪心]
[问题背景] 一天sxc,zsx,wl到gly坐汽艇,本来和其他的人约好了一起去,结果被放了鸽子,3人便只有一人负担x元去坐汽艇(很贵哦).坐了才发现如果汽艇上人多了位置就不宽敞,就不好玩了.而3个人 ...
- vijos1004 博弈论
一道挺简单的博弈论题 感觉自己也没有很规范的学过博弈论吧,就是偶尔刷到博弈论的题目,感受一下推导的过程,大概能领悟些什么 我们设2001.11.4必败,推上去,即2001.10.4和2001.11.3 ...
- linux下telnet mysql的3306断口,提示Can't connect to MySQL server on localhost (110)
新购买的阿里云ECS服务器,食用lnmp环境,安装完毕后,telnet localhost 3306提示Can't connect to MySQL server on localhost (110) ...
- 搞定KMP匹配算法
KMP算法介绍及实现——轻松搞定KMP匹配算法 本文介绍了字符串匹配算法中的BF算法和KMP算法.本文中KMP算法介绍部分是关于KMP算法相关文章中最简洁的一篇文章之一.下一篇将继续介绍Horspoo ...
- NoSQL发展简史、粗略分类及选择
这里对近来看的部分NoSQL资料做一个汇总记录,主要包括简史.粗略分类及数据库选择的考虑事项.NoSQL常见的解释是“non-relational”,有时也称作Not Only SQL. 1. ...
- 用TableView做的新闻客户端展示页面
用TableView做的新闻客户端展示页面 // MyTableViewImageCell.m // SildToDo // // Created by WildCat on 13-8-18. ...
- easyuidatagrid扩展--玩一下,无实际意义
直接上代码 $.extend($.fn.datagrid.defaults.editors, { operater: { init: function (container, options) { v ...