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正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
随机推荐
- DotNET应用架构设计指南 安全 运行管理和通讯策略
DotNET应用架构设计指南(第三章:安全 运行管理和通讯策略(13-16)) 安全 运行管理和通讯策略 组织策略定义的规则是支配应用程序如何安全,如何管理,不同的应用程序组件是如何和另一组件及外部服 ...
- winform实现动态按钮
private void button6_MouseMove(object sender, MouseEventArgs e) { button6.ImageAlign = ContentAlignm ...
- Linq to XML的练习
假如有以下XML: <?xml version="1.0" encoding="utf-8" ?> - <export> - <p ...
- WPF开发的FTP文件上传工具
前言 最近楼主在改版的项目里有使用到FTP上传文件,所以看到之前的项目里FTP上传的功能,然后抽个时间学习一番,做着做着就作出了这个工具了(虽然有些验证的功能没加上),但是基本的上传功能还是很好用的, ...
- FineUI开源版之TreeGrid实现
FineUI开源版是没有树表格的,但是又需要,怎么办呢?在博客园看到一位大大的文章 http://www.cnblogs.com/shiworkyue/p/4211002.html 然后参考,不知道为 ...
- Asp.net MVC集成Google Calendar API(附Demo源码)
Asp.net MVC集成Google Calendar API(附Demo源码) Google Calendar是非常方便的日程管理应用,很多人都非常熟悉.Google的应用在国内不稳定,但是在国外 ...
- 企业架构研究总结(34)——TOGAF架构内容框架之架构制品(下)
4.2.31 数据生命周期图(Data Lifecycle Diagram) 数据生命周期图是在业务流程的约束之下对业务数据在其整个生命周期(从概念阶段到最终退出)中对其进行管理的核心部分.数据从本质 ...
- ibatis实战之一对多关联
在实际开发中,我们常常遇到关联数据的情况,如User对象拥有若干Book对象 每个Book对象描述了归属于一个User信息,这种情况下,我们应该如何处理? 通过单独的Statement操作固然可以实现 ...
- springMVC3学习(一)--框架搭建
由于项目需要,学习下springMVC,在此简单记录一下. 如有十万个为什么,暂且忽略,待以后研究. 本人是基于3.1.1版本开发,如遇jar包版本冲突等其他问题,概不负责. 下载地址:上传此zip资 ...
- easyui struts后台实现tree返回json数据
首先jsp页面有一ul用于展现tree <ul id="trueULid"></ul> 加载tree <script type="text/ ...