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") 其 ...
随机推荐
- 手机下的ev.pageX无效
把 ev.pageX 换成 e.originalEvent.targetTouches[0].pageX; 例子: var start_x, start_y, end_x, end_y, ...
- SQL Server 把当前日期中月份和几号中的0 去掉
select left(convert(varchar(10),getdate(),20),4)+replace(right(convert(varchar(10),getdate(),20),6), ...
- NOIP2001-普及组复赛-第一题-数的计算
题目描述 Description 我们要求找出具有下列性质数的个数(包含输入的自然数n): 先输入一个自然数n(n<=1000),然后对此自然数按照如下方法进行处理: 1.不作任何处理; 2.在 ...
- DLNA
DLNA最早由索尼.英特尔.微软等提出,全称是DIGITAL LIVING NETWORK ALLIANCE,旨在解决个人PC,消费电器,移动设备在内的无线网络和有线网络的互联互通,其实就是解决电脑和 ...
- Mac 命令行中进入带有空格的文件夹
http://blog.sina.com.cn/s/blog_5e8392b10100jkvg.html 今天在公司用mac的时候,有个文件夹的名字有空格,怎么都进不去,在网上一查原来不能直接cd 文 ...
- SpringMvc处理post请求乱码的filter
<filter> <filter-name>encodingFilter</filter-name> <filter-clas ...
- java泛型小问题
几年前当Java5还未正式发布的时候,看到过一些人写的介绍Tiger中的新特性,当时对我第一感觉冲击最大的就是泛型(generics)和注释(annotation),因为它们直接影响了我们编码的语法习 ...
- spark第二篇--基本原理
==是什么 == 目标Scope(解决什么问题) 在大规模的特定数据集上的迭代运算或重复查询检索 官方定义 aMapReduce-like cluster computing framework de ...
- ASP.NET MVC View向Controller提交数据
我们知道使用MVC的一个很重的的用途就是把Controller和View之间进行解耦,通过控制器来调用不同的视图,这就注定了Controller和View之间的传值是一个很重的知识点,这篇博文主要解释 ...
- Git 删除文件
在Git中,删除也是一种修改的操作,我们验证一下,先在工作目录中添加一个新文件test.txt,并且提交: $ git statusOn branch masterUntracked files: ...