写在前面:给某个或多个元素自定义属性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. Windows注册表的基本知识及应用

    转帖:Windows注册表的基本知识及应用 2009-12-23 11:30:56 分类: Windows注册表的基本知识及应用  一.注册表的重要性 在DOS年代,对计算机的内存管理及系统配置主要通 ...

  2. div高度自适外层div高度随里层div高度自适

    尝试过许多办法 其中一网友的最靠谱就是在外层div样式添加两个标签(不能少) clear:both;  overflow:auto;

  3. 2013.5.A

    题1 高低位交换 [问题描述] 给出一个小于2^32的正整数.这个数可以用一个32位的二进制数表示(不足32位用0补足).我们称这个二进制数的前16位为“高位”,后16位为“低位”.将它的高低位交换, ...

  4. [置顶] Weblogic节点管理

    配置节点管理之后能方便管理,可以在控制台启动停止被管服务器,一般配置步骤:创建受管服务器,创建machine,屏蔽SSL主机名验证,修改nodemanager.properties,启动nodeman ...

  5. TOGAF企业连续体和工具之架构资源库及架构工具的选择

    TOGAF企业连续体和工具之架构资源库及架构工具的选择 3. 架构资源库 在一个企业,尤其是在一个大型企业中,建设一个成熟的架构往往会产生大量的工作产品.为了很好地管理和利用这些工作产品,企业需要制定 ...

  6. 【转】title与alt的区别

    html中的title属性和alt属性让人有些混淆. 以前不知道有title这个属性,第一次用到它时,就和alt产生了混淆.一位朋友告诉我说,alt是图片img标签里用的,title是超链接里用的,当 ...

  7. struts整合spring整合hibernate

    1, web.xml中配置spring监听类 <listener> <listener-class>org.springframework.web.context.Contex ...

  8. ASP.NET Web API框架揭秘:路由系统的几个核心类型

    ASP.NET Web API框架揭秘:路由系统的几个核心类型 虽然ASP.NET Web API框架采用与ASP.NET MVC框架类似的管道式设计,但是ASP.NET Web API管道的核心部分 ...

  9. Machine Learning/Random Projection

    这次突然打算写点dimension reduction的东西, 虽然可以从PCA, manifold learning之类的东西开始, 但很难用那些东西说出好玩的东西. 这次选择的是一个不太出名但很有 ...

  10. MySQL 的 phpmyadmin上传大小限制(转)以及 MySQL server has gone away 的解决办法

    phpmyadmin上传大小限制 原帖地址:http://www.hmidc.com/home/news/?13914.html 时间:2011-6-21 11:17:57  作者:红帽之家  来源: ...