用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. Openjudge-计算概论（A）-整数奇偶排序

    描述: 输入10个整数,彼此以空格分隔重新排序以后输出(也按空格分隔),要求:1.先输出其中的奇数,并按从大到小排列:2.然后输出其中的偶数,并按从小到大排列.输入任意排序的10个整数(0-100), ...

  2. IO.Path路径

    string filePath =@"E:/Randy0528/中文目录/JustTest.rar"; 更改路径字符串的扩展名.System.IO.Path.ChangeExten ...

  3. mysql灵活分页存储过程

    ), -- 表名 ), -- 排序字段(必须!支持多字段不用加order by) IN _PageIndex int, -- 指定当前为第几页 IN _PageSize int, -- 每页多少条记录 ...

  4. Announcement

    本来是习惯把每天的内容写在一个txt里. 似乎不符合要求.无论格式还是内容.于是转战blog. 事实上.有专业课学习加上马上考四级以及下学期可能的专业调整.此学期时间紧张. 能完成日常作业并掌握周课内 ...

  5. JS 经典代码段总结 start from 2016-08-22

    1.for(var i = 0, max = myArray.length; i < max ; i++){ //用myArrayy[i]来做点什么 } 用max存储myArray的长度,防止每 ...

  6. Thrift源码解析--TBinaryProtocol

    本文为原创,未经许可禁止转载. 关于Tprotocol层都是一些通信协议,个人感觉内容较大,很难分类描述清楚.故打算以TBinaryProtocol为例,分析客户端发请求以及接收服务端返回数据的整个过 ...

  7. DNS 域名系统 (Domain Name System)

      DNS 域名系统 (Domain Name System) 许多应用层软件经常直接使用域名系统 DNS (Domain Name System),但计算机的用户只是间接而不是直接使用域名系统. 因 ...

  8. 《JavaScript高级程序设计》读书笔记 ---数据类型

    ECMAScript 中有5 种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number.String和Object——复杂数据类型,Object 本质上是由一组 ...

  9. Logger日志管理工具类

    import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...

  10. UESTC 1217 The Battle of Chibi

    dp+树状数组优化. dp[i][j]表示以a[i]结尾,最长上升序列长度为j的方案数.dp[i][j]=sum{dp[k][j-1]} 其中k<i&&a[k]<a[i]. ...