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") 其 ...
随机推荐
- LeetCode OJ 121. Best Time to Buy and Sell Stock
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...
- 线程的实现方法以及区别 extends Thread、implements Runable
/** 线程存在于进程当中,进程由系统创建. 创建新的执行线程有两种方法 注意: 线程复写run方法,然后用start()方法调用,其实就是调用的run()方法,只是如果直接启动run()方法, ...
- NYOJ-791 Color the fence （贪心）
Color the fence 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 Tom has fallen in love with Mary. Now Tom w ...
- #define const extern
将父类中的常量放到. m文件,子类就不会重复包含了.之后再.h文件中用extern NSSting * const ILScoreShowStartTime;// extern 用来声明变量和函数.c ...
- 与导航栏下控件的frame相关的edgesForExtendedLayout、translucent、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets等几个属性的详解
在引入了导航控制器UINavigationController和分栏控制器UITabBarController之后,我们在设置控件的frame的时候就需要注意避开导航栏UINavigationBar ...
- 怎么取消ie浏览器body与html的间隙
在css文件第一行定义全局样式,可以消除html标签默认间隙*{margin:0;padding:0;}
- void与void*详解
void关键字的使用规则: 1. 如果函数没有返回值,那么应声明为void类型: 2. 如果函数无参数,那么应声明其参数为void: 3. 如果函数的参数可以是任意类型指针,那么应声明其参数为void ...
- UVALive - 4670 Dominating Patterns AC 自动机
input n 1<=n<=150 word1 word2 ... wordn 1<=len(wirdi)<=70 s 1<=len(s)<=1000000 out ...
- Valgrind: memcheck of memleak/mem-uninitialization; massif usage
first install valgrind, its newest ver is 3.11, and stops updating since 2015/12. in centos, yum ins ...
- csdn如何转载别人的文章
1.找到要转载的文章,用chrome浏览器打开,右键选择审查元素 2.在chrome中下方的框里找到对应的内容,html脚本中找到对应的节点,选中节点,网页上被选中内容会被高亮显示,然后右键菜单选中 ...