写在前面:给某个或多个元素自定义属性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. Linux 安装配置maven3.0 以及搭建nexus私服

    http://carvin.iteye.com/blog/785365 一.软件准备 1.apache-maven-3.0-bin.tar.gz 下载地址:http://www.apache.org/ ...

  2. AngularJS 3

    AngularJS 源码分析3 本文接着上一篇讲 上一篇地址 回顾 上次说到了rootScope里的$watch方法中的解析监控表达式,即而引出了对parse的分析,今天我们接着这里继续挖代码. $w ...

  3. Linux : fedora 安装 vnc server

    Linux配置VNC服务 安装VNC服务端 #yum install vnc-server 配置VNC服务参数文件 编辑vncservers文件追加如下 #vi /etc/sysconfig/vncs ...

  4. 生成自己的Webapi帮助文档(二)

    经过今天一上午的修改,已经有个基础的框架了,其它功能只能是在实际使用中发现一个修改一个了. 以下是生成的结果示例: 相比昨天,几个Model都有修改,这里就不一一贴代码了,放个代码包上来,有需要的自己 ...

  5. 3 MySQL SQL基础

    目录 1. SQL概述2. 数据库操作3. 表操作4. 记录操作 1. SQL概述 SQL,结构化查询语言(Structured Query Language),一种数据库查询和程序设计语言,用于存取 ...

  6. c# 控制职能运行单一实例,再次运行显示已经运行的实例

    有这么个需求,软件只能运行一个实例,软件运行后可以让其隐藏运行 再次运行这个软件的时候就让正在运行的实例显示出来 ================================= 当软件隐藏后没办法 ...

  7. 批量转换cue文件编码

    之前在网上下载的无损(flac.ape),好多都是整盘的,也就是说一个flac或ape文件搭配一个cue分轨文件,这个文件记录着在不同时间段是哪一首歌曲. 由于之前的操作都是在windows下进行的, ...

  8. 长度为n的数组,有一个数重复出现了n/2+1次,找出(三种方法)

    问题: 长度为n的数组,有一个数重复出现了n/2+1次,找出这个数:   解决: 比较直接的思路是遍历每个元素,让其与剩下其他元素比较,相等一次计数器sum++,直到sum=n/2+1为止: #inc ...

  9. IOS 跳转到系统的url

    About — prefs:root=General&path=AboutAccessibility — prefs:root=General&path=ACCESSIBILITYAi ...

  10. JAVA-读取文件部分内容计算HASH值

    对于一些大文件,有时会需要计算部分内容的Hash,下面的函数计算了 文件头尾各1M,中间跳跃100M取10K 以及文件大小的Hash值 public static String CalHash(Str ...