写在前面:给某个或多个元素自定义属性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根据元素自定义属性获取元素,操作元素的更多相关文章

  1. 从零开始学 Web 之 jQuery(二)获取和操作元素的属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. Robotium源码解读-native控件/webview元素的获取和操作

    目前比较有名的Uitest框架有Uiautomator/Robotium/Appium,由于一直对webview元素的获取和操作比较好奇,另外Robotium代码量也不是很大,因此打算学习一下. 一. ...

  3. [Web 前端] 023 js 的流程控制、循环和元素的获取、操作

    1. Javascript 流程控制 用于"基于不同条件执行不同的动作"的场合 1.1 if 语句 三种形式 // 第一种 if... // 第二种 if... else ... ...

  4. jquery1.11 操作checkbox:全选、取消全选、获取选择元素、获取取消选择元素(总结)

    jquery1.11.1版本完成对checkbox的操作 1. 使用属性prop设置选中状态 2.使用:checked和:not(:checked)获取选中的元素 源码: <!DOCTYPE h ...

  5. JQ 获取下一个元素和获取下一个元素的[指定]子元素

    <script type="text/javascript"> $(function () { $("#div1").next().addClass ...

  6. javascript 操作元素属性的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 前端JavaScript入门——JavaScript变量和操作元素

    变量JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定. 定义变量需要用关键字 ‘var’: var a = 123; var b = 'asd'; //同时定义多个 ...

  8. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  9. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

随机推荐

  1. 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)

    placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...

  2. sqlclr返回数据集案例

    ----------------------------------------------返回一张表,但只有一条数据,最后一次设置的. [Microsoft.SqlServer.Server.Sql ...

  3. MIT Introduction to Computer Science and Programming (Lesson one )

    MIT Introduction to Computer Science and Programming (Lesson one ) 这篇文是记载 MIT 计算机科学及编程导论 第一集 的笔记 Les ...

  4. noip推荐系列:汽艇[贪心]

    [问题背景] 一天sxc,zsx,wl到gly坐汽艇,本来和其他的人约好了一起去,结果被放了鸽子,3人便只有一人负担x元去坐汽艇(很贵哦).坐了才发现如果汽艇上人多了位置就不宽敞,就不好玩了.而3个人 ...

  5. vijos1004 博弈论

    一道挺简单的博弈论题 感觉自己也没有很规范的学过博弈论吧,就是偶尔刷到博弈论的题目,感受一下推导的过程,大概能领悟些什么 我们设2001.11.4必败,推上去,即2001.10.4和2001.11.3 ...

  6. 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) ...

  7. 搞定KMP匹配算法

    KMP算法介绍及实现——轻松搞定KMP匹配算法 本文介绍了字符串匹配算法中的BF算法和KMP算法.本文中KMP算法介绍部分是关于KMP算法相关文章中最简洁的一篇文章之一.下一篇将继续介绍Horspoo ...

  8. NoSQL发展简史、粗略分类及选择

    这里对近来看的部分NoSQL资料做一个汇总记录,主要包括简史.粗略分类及数据库选择的考虑事项.NoSQL常见的解释是“non-relational”,有时也称作Not Only SQL.     1. ...

  9. 用TableView做的新闻客户端展示页面

    用TableView做的新闻客户端展示页面 //  MyTableViewImageCell.m //  SildToDo // //  Created by WildCat on 13-8-18. ...

  10. easyuidatagrid扩展--玩一下,无实际意义

    直接上代码 $.extend($.fn.datagrid.defaults.editors, { operater: { init: function (container, options) { v ...