21、Dom元素的灵活查找--通过className条件筛选

以你之姓@ 2022-08-23 00:46 178阅读 0赞

1、Dom元素的灵活查找  
 .如何用className 选择元素  
  -选出所有元素

-通过className条件筛选

1.1 html代码

<body>
    		<input id="oValue" />
    		<button type="button" id="oBtn">点击</button>
    		<ul id="oul">
    			<li class="box">111<a href="javascript:void(0);">删除</a></li>
    			<li>222<a href="javascript:void(0);">删除</a></li>
    			<li class="box">333<a href="javascript:void(0);">删除</a></li>
    			<li>444<a href="javascript:void(0);">删除</a></li>
    		</ul>
    </body>

1.2 JavaScript代码

<script type="text/javascript">
    			function getByClass(oParent, sClass) {
    				//获取oParent下的所有标签元素
    				var aEle = oParent.getElementsByTagName('*');
    				//用于存放，含有sClass的标签
    				var aResult = [];
    				var i = 0;
    				for (i = 0; i < aEle.length; i++) {
    					if (aEle[i].className == sClass) {
    						aResult.push(aEle[i]);
    					}
    				}
    				//返回含有含有sClass的标签 
    				return aResult;
    			}
    			window.onload = function() {
    				var oUl = document.getElementById("oul");
    				var aBox = getByClass(oUl, 'box');
    				for (var i = 0; i < aBox.length; i++) {
    					alert(aBox[i])
    					aBox[i].style.background = "yellow";
    				}
    			}
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关通过java遍历文件夹的文件并通过条件筛选

1.获取文件夹的路径payh 2.创建一个存储file的集合 3. private void extractedFile(List fileList, Strin

朴灿烈づ我的快乐病毒、/ 2023年10月04日 20:10/ 0 赞/ 62 阅读

相关 js 筛选删除数组中符合条件的所有元素

filter用于对数组进行过滤。它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意：filter()不会对空数组进行检测、不会改变原始数组

小灰灰/ 2023年09月27日 21:21/ 0 赞/ 92 阅读

相关从旧数组里筛选出符合条件的元素

arr1 中有一些数字，需要筛选出大于10的，并放进arr2里面。方法1： var arr1 = [3,90,9,49,0,22,19,9,3,5]; v

旧城等待，/ 2023年06月05日 08:10/ 0 赞/ 71 阅读

相关 querySelector() 查找dom元素

`document.querySelector` 返回文档中匹配指定的CSS选择器的第一元素 <p id="demo">id="demo" 的 p 元素</p>

矫情吗；*/ 2023年02月25日 15:22/ 0 赞/ 89 阅读

相关通过className来改变样式

![在这里插入图片描述][20200613114041566.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

柔光的暖阳◎/ 2023年02月17日 08:56/ 0 赞/ 126 阅读

相关 JavaScript DOM基础：查找元素

前言 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口)；DOM描绘了一个层次化的节点树,运行开发人员可

亦凉/ 2023年01月19日 07:17/ 0 赞/ 193 阅读

相关 21、Dom元素的灵活查找--通过className条件筛选

1、Dom元素的灵活查找 .如何用className 选择元素 -选出所有元素 -通过className条件筛选 1.1 html代码

以你之姓@/ 2022年08月23日 00:46/ 0 赞/ 179 阅读

相关 JS封装通过className获取元素的函数

有时候在写项目的时候为了方便重用，不考虑通过id来取得元素，而是通过可重用的class来取得元素；可是底层的js并不提供这个方法。所以查阅资料封装了这个getElementsB

ゝ一世哀愁。/ 2022年06月17日 14:27/ 0 赞/ 299 阅读

相关 DOM元素节点查找练习

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

你的名字/ 2022年05月21日 05:46/ 0 赞/ 360 阅读

相关 javascript通过appendChild(dom)方法插入一个dom元素无效

javascript通过appendChild(dom)方法插入一个dom元素：父dom的ID：thediv 子dom的ID：closeImgContainer

àì夳堔傛蜴生んèń/ 2021年09月30日 05:48/ 0 赞/ 347 阅读