JS-DOM元素灵活查找
用className选择元素
封装成函数
<title>无标题文档</title>
<script>
/*
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++)
{
if(aLi[i].className=='box')
{
aLi[i].style.background='red';
}
}
}*/
//函数封装
function getByClass(oParent,sClass)
{
var aResult=[];
var aEle=oParent.getElementsByTagName('*'); for(var i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aBox=getByClass(oDiv,'box'); for(var i=0;i<aBox.length;i++)
{
aBox[i].style.background='green';
}
}
</script>
</head> <body>
<ul id="div1">
<li class="box"></li>
<li></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
</ul>
</body>
<title>无标题文档</title>
<script>
window.onload=function ()
{
var aA=document.getElementsByTagName('a');
for(var i=0;i<aA.length;i++)
{
aA[i].onclick=function ()
{
this.parentNode.style.display='none';
};
}
};
</script>
</head> <body>
<ul id="ull">
<li>2352345 <a href="javascript:;">隐藏</a></li>
<li>34654745 <a href="javascript:;">隐藏</a></li>
<li>sdfger <a href="javascript:;">隐藏</a></li>
<li>dsbfsd <a href="javascript:;">隐藏</a></li>
<li>dfs <a href="javascript:;">隐藏</a></li>
<li>436547<a href="javascript:;">隐藏</a></li>
</ul>
</body>
JS-DOM元素灵活查找的更多相关文章
- 8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件
HTML DOM(Document Object Model)文档对象模型 当网页被加载时,浏览器会创建页面的文档对象模型. HTMLDOM 定义了用于HTML的一系列标准的对象.通过DOM,你可以访 ...
- 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners
偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...
- JS DOM元素的操作(创建,添加,删除,和修改属性)
1.1 创建 DOM 元素以及相应的追加方式 1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...
- JS DOM元素
// 为element增加一个样式名为newClassName的新样式 function addClass(element, newClassName) { var value = element.c ...
- js DOM 元素ID就是全局变量
有人在twitter上提到了:在Chrome的JavaScript终端中,你只需要输入一个元素的ID,就可以访问到这个元素.@johnjbarton给了解释,这是因为所有的元素ID都是全局变量.本文再 ...
- js dom元素加载完成执行
//dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...
- HTML DOM元素关系与操作
<html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...
- javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式
一.背景:一个表单中,要修改一些li中有class=box的样式,将它的background设置为red红色.一般的做法是我们可以先找到父级元素 ,然后由父级元素找到所有相关tagName,最后,来一 ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
随机推荐
- Visual Studio 2010 安装帮助文档问题
今天重装系统,装完VS2010后,如往常一样安装文档,却弹出如下错误"Could not create the local store in the specified folder.... ...
- php笔记(一)面向对象编程
<?php //定义一个类 class Car { var $name = '汽车'; function getName() { return $this->name; } } //实例化 ...
- 查找一个数组中最小的前n项
/****************************************************************** find the biggest x number in a s ...
- Java判断PC端还是移动端
package com.*.*.*; import java.io.IOException;import java.util.regex.Matcher;import java.util.regex. ...
- 值得一提:关于 HDFS 的 file size 和 block size
转 http://blog.csdn.net/samhacker/article/details/23089157?utm_source=tuicool&utm_medium=referral ...
- 关于oracle数据库(2)
数据备份.数据删除.数据还原 连接数据库,查看scott用户下面的所有表 数据备份(数据导出)要输入导出文件路径和文件名(文件扩展名可输入也可以不输入) 导出成功后,可以在上面输入的文件路径下面看到导 ...
- 欧几里得算法求最大公约数(gcd)
关于欧几里得算法求最大公约数算法, 代码如下: int gcd( int a , int b ) { if( b == 0 ) return a ; else gcd( b , a % b ) ; } ...
- Android依赖注入:Google Guice on Android的使用及相关资源
本文转自:http://blog.csdn.net/sangming/article/details/8878104 RoboGuice 使用谷歌自己的Guice库,给Android带来了简单和易用的 ...
- ios电话监听状态
#import "ViewController.h" #import <CoreTelephony/CTCallCenter.h> #import <CoreTe ...
- VS2010 制作安装包,无法生成卸载快捷方式
目前我出现了这个错误,原因是项目目录中包含了中文字符导致的,我改变了文件夹之后,就没问题了