写在前面:给某个或多个元素自定义属性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. LigerUI一个前台框架增、删、改asp.net代码

    LigerUI一个前台框架增.删.改asp.net代码的实现   先上代码:前台代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  2. C#:vs2010无法打开vs2012创建的项目

    vs低版本打开高版本创建的项目时会提示"选择的文件是解决方案文件,但是用此应用程序的较新版本创建的,无法打开" 解决办法: 写字板打开解决方案sln文件 将其改成你现在用的vs版本 ...

  3. ios中mvc的FormsAuthentication.SetAuthCookie(cookieUserName, false)失败

    如果楼主使用.net开发,要注意FormsAuthentication.SetAuthCookie 方法的使用会导致ios出现该问题.因为这个方法在ios设备上是把票据加入到url中,导致url和你的 ...

  4. Dynamics CRM 2013 体验

    CRM 2013终于可以下载了,赶紧下载安装. 在CRM 2011 的基础上,CRM 2013 在UI上有了很大的变化.从CRM 2011 RollUp 12开始,微软就放弃了按钮的立体效果,逐渐趋向 ...

  5. Web API 2中的属性路由

    Web API 2中的属性路由 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.ht ...

  6. mark_May

    嗯神忙的五月总算是过完了. 草草的做完研究性学习,浑浑噩噩的考了数学联赛,以及在考试的上一周还在疯狂的看未闻花名,貌似还有前几个星期不懂是吃错药还是怎样 总急着把2013的题目刷完=-=可是貌似到现在 ...

  7. .NET面向对象特性之封装

    .NET面向对象特性之封装 面向对象的基本内容由:类.对象.属性.方法.字段构成. 面向对象的三大特性:继承.多态.封装. 关于面向对象的特性很多人都把目光转向了继承.多态和接口,却很少有人提及过封装 ...

  8. Leetcode::JumpGame

    Description: Given an array of non-negative integers, you are initially positioned at the first inde ...

  9. ARM备忘

    mov: move sub: subtract cmp: compare cmpls: ls--->lower or same, le--->less or equal, hi---> ...

  10. Object-c学习之路八(NSArray(数组)遍历和排序)

    今天学习了NSArray的遍历和排序,现在在这里做一下总结: 遍历现在实现了四中方法: 排序大概有三中方法:(代码中都有注释) 关于对象的排序还是以Student和Book为例 每个Student持有 ...