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

以你之姓@ 2022-08-23 00:46 119阅读 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 条评论，119人围观）

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

相关阅读

相关 React通过classnames库添加类

React添加Class的方式在vue中添加class是一件非常简单的事情: 你可以通过传入一个对象, 通过布尔值决定是否添加类: <button :cla

╰+哭是因爲堅強的太久メ/ 2023年10月02日 20:57/ 0 赞/ 21 阅读

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

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

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

相关 querySelector() 查找dom元素

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

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

相关通过className来改变样式

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

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

相关 JavaScript DOM基础：查找元素

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

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

相关工作记录 --el-tree组合筛选条件（多重筛选条件）的实现

思路将筛选条件都塞到一个对象里，再用`this.$refs.tree.filter(obj)`时，传入一个对象具体实现 data() {

比眉伴天荒/ 2022年10月07日 12:55/ 0 赞/ 340 阅读

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

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

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

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

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

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

相关 DOM元素节点查找练习

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

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

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

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

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