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

最新推荐文章于 2024-04-03 11:38:14 发布

Bwz_Learning

最新推荐文章于 2024-04-03 11:38:14 发布

阅读量2.4k

点赞数 1

分类专栏： JavaScript_Bak 文章标签： className JavaScript

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51580234

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 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>