HTML与JavaScript操作DOM示例-优快云博客

本文链接：https://blog.youkuaiyun.com/Le_OOP/article/details/80818980

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>

	</head>
	<body>
	<ul id="ul">
	<li class="a abc abcd abcde ">1</li>
	<li class="c a">2</li>
	<li class="aa">3</li>
	<li class="a c b r f">4</li>
	<li class="b">5</li>
	</ul>
	<script>
	function rua(ul,a) {
	// rua为函数名称 ul为ul的id a为li里面的class类名前面是父元素，后面子元素
	var oUL = document.getElementById(ul);
	// 选定ul 并且声明ul
	var arrLi = oUL.getElementsByTagName("*");
	// 选择ul中所有的（*代表所有）标签元素
	var arLII = [];
	// 新建一个空数组
	for (var i = 0; i < arrLi.length; i++) {
	// 循环arrLi中的所有元素
	var arrString = arrLi[i].className.split(" ");
	// 将之前选中的元素类名转化为数组并且新建在一个数组中
	for (j in arrString) {
	// j代表遍历所有arrString中的元素
	if (arrString[j] == a) {
	// 判断数组中是否有class为a的数值
	arLII.push(arrLi[i])
	// 如果有class为a的数值则将该数值添加到空数值中
	}
	}
	}
	return arLII;
	// 返回数组arLII
	}
	for (var i = 0; i <rua("ul","a").length; i++) {
	// 前面已经找到的数组，让这些数组所在的元素遍历一遍
	rua("ul","a")[i].style.background = "red";
	// 让这些选中的class中带有a的背景颜色改成红色
	}
	</script>
	</body>
	</html>