用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元素灵活查找的更多相关文章

  1. 8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件

    HTML DOM(Document Object Model)文档对象模型 当网页被加载时,浏览器会创建页面的文档对象模型. HTMLDOM 定义了用于HTML的一系列标准的对象.通过DOM,你可以访 ...

  2. 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners

    偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...

  3. JS DOM元素的操作（创建，添加，删除，和修改属性）

    1.1 创建 DOM 元素以及相应的追加方式 1.1.1  创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...

  4. JS DOM元素

    // 为element增加一个样式名为newClassName的新样式 function addClass(element, newClassName) { var value = element.c ...

  5. js DOM 元素ID就是全局变量

    有人在twitter上提到了:在Chrome的JavaScript终端中,你只需要输入一个元素的ID,就可以访问到这个元素.@johnjbarton给了解释,这是因为所有的元素ID都是全局变量.本文再 ...

  6. js dom元素加载完成执行

    //dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...

  7. HTML DOM元素关系与操作

    <html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...

  8. javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式

    一.背景:一个表单中,要修改一些li中有class=box的样式,将它的background设置为red红色.一般的做法是我们可以先找到父级元素 ,然后由父级元素找到所有相关tagName,最后,来一 ...

  9. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

随机推荐

  1. [ An Ac a Day ^_^ ] hdu 1662 Trees on the level 数据结构 二叉树

    紫书上的原题 正好学数据结构拿出来做一下 不知道为什么bfs的队列一定要数组模拟…… 还可以练习一下sscanf…… #include<stdio.h> #include<iostr ...

  2. Java 算法

    1.简单的冒泡排序 //冒泡算法一共两种 // -----冒泡算法(1) int a[]={23,69,4,58,1,20}; for (int i = 0; i < a.length-1; i ...

  3. Arch最小化安装LXDE桌面环境

    安装最小化的LXDE桌面环境: pacman -S lxde-common 安装LXDE Session: pacman -S lxsession 不安装这个没法登录进桌面环境 安装LXDE面板: p ...

  4. 可以有效防护XSS，sql注射，代码执行，文件包含等多种高危漏洞。

    http://bbs.aliyun.com/read/137391.html <?php /** * 云体检通用漏洞防护补丁v1.1 * 更新时间:2013-05-25 * 功能说明:防护XSS ...

  5. SpringMvc+thymeleaf+HTML5中文乱码问题

    SpringMvc+thymeleaf+HTML5环境下遇到中文乱码...... 按照以往经验逐个排查,开发环境统一为utf-8编码,服务器也配置了编码过滤器,tomcat也是utf-8编码.前台页面 ...

  6. 3. Shell 基本运算符

    1. 概述 1.1 Shell 支持多种运算符,包括以下几种 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 1.2 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例 ...

  7. Spring的后置处理器BeanPostProcessor

    一.BeanPostProcessor接口的作用 如果我们需要在Spring容器完成Bean的实例化.配置和其他的初始化前后添加一些自己的逻辑处理,我们就可以定义一个或者多个BeanPostProce ...

  8. iOSNSDate的相关操作

    //获取当前时间 时间根据格林威治时间显示 //时间 8小时 英国格林威治   7小时 NSDate *date = [NSDate date]; NSLog(@"%@",date ...

  9. iOS可变字符串的所有操作

    可直接把代码复制即可结合输出看结果加深记忆 //创建一个可变字符串 NSMutableString * ms1 = [[NSMutableString alloc]init]; //可以通过类方法来创 ...

  10. 把excel数据导入mysql中

    适用:每列的数据都不是以逗号分隔. 1.在mysql建表,全部字段与表头相同且顺序一致 2.将excel另存为csv格式,用Editplus把CSV文件另存为UTF-8编码格式 3.执行load da ...