用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. Twitter Storm源代码分析之Nimbus/Supervisor本地目录结构

    storm集群里面工作机器分为两种一种是nimbus, 一种是supervisor, 他们通过zookeeper来进行交互,nimbus通过zookeeper来发布一些指令,supervisor去读z ...

  2. ubuntu安装docker

    uname -r #查看内核版本要大于3.10apt-get updateapt-get install linux-image-generic-lts-trusty wget -qO- https: ...

  3. 2016 ACM/ICPC Asia Regional Dalian ICPC大连现场赛

    讲道理我挺想去大连的…… 毕竟风景不错…… 而且这次能去北京也是靠大连网络赛这一场拉开的优势…… 一道补图最短路一道数学推论简直爽爆…… 当然 除了这一场 其他场都非常划水…… 上次看到别人的博客用这 ...

  4. C++ 类中的引用成员变量初始化

    刚遇到一个问题,需要的类成员为指针的引用,而引用不能在构造函数里初始化,必须在初始化列表中进行初始化,并且需要该引用在构造函数中的形参必须为引用形式 1: class ThreadParam { 2: ...

  5. 高精度运算专题-输出函数与字符串转数字函数（Output function and the string to number function）

    输出函数:这个函数别看它小,但浓缩的都是精华啊 作用:对于高精度的数组进行倒序输出 思路:首先从被传入的数组第一位开始,一直往前扫输出就可以了(i--) 注释:因为每个数组的第一位是用来存储这个数组的 ...

  6. javacript参数传递表单验证

    <!doctype html> <html> <head> <meta charset="utf-8"> <style typ ...

  7. Python 学习笔记11

    如何要飞得高,就该把天空忘掉.如果时时想着梦想,那就寸步难行.因为会产生很强的挫败感.倾空自己的杯子,把自己放空,才能放得进去东西. 这两天一直在鼓捣要用python写一个博客出来.先是下载了一个放到 ...

  8. perl Socket接收超时设置

    一般来说, IO::Socket::INET里的Timeout设置是对于conncet的 如果你想设置recv接收超时, 可以这样设置: usr Socket: ...... , )); #注意这里p ...

  9. split分割字符串时的一些特殊分隔符

    @Test public void testSplit() { String address = "上海.上海市.闵行区.吴中路"; String[] splitAddress = ...

  10. MFC滚动条实现要点

    MFC滚动条实现要点 1.鼠标拖动滚动条从而滚动窗口,需要实现CDialog::OnVScroll()函数.根据传入参数nPos,计算滚动距离.最后再调用ScrollWindow()和SetScrol ...