067|自定义byClassName方法

最新推荐文章于 2021-03-17 16:34:53 发布

Asteroid 325

最新推荐文章于 2021-03-17 16:34:53 发布

阅读量291

点赞数

本文链接：https://blog.csdn.net/weixin_43846020/article/details/107791395

版权

JS 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/*
			  node.getElementsByClassName()
			*/
		   function elementsByClassName(node,classStr){
			   //1.获取node这个节点下所有的子节点
			   var nodes=node.getElementsByTagName("*");
			   var arr=[];//存放符合条件的结点
			   for(var i=0;i<nodes.length;i++){
				   if(nodes[i].className===classStr){
					   arr.push(nodes[i]);
				   }
			   }
			   return arr;
		   }
		   
		   window.onload=function(){
			   var oL=document.getElementById("ol1");
			   var nodes=elementsByClassName(oL,"box");
			   alert(nodes.length);
			   for(var i=0;i<nodes.length;i++){
				   nodes[i].style.backgroundColor='red';
			   }
		   }
		</script>
	</head>
	<body>
		<ul id='ul1'>
			<li>111</li>
			<li class="box">111</li>
			<li>111</li>
			<li>111</li>
			<li class="box">111</li>
			<li name='hello'>111</li>
			<div class="box" name="hello">div</div>
		</ul>
		<input type="text" name="hello" />
		<span name="hello">span</span>
		<ol id="ol1">
			<li>222</li>
			<li class="box">222</li>
			<li class="box">222</li>
			<li>222</li>
		</ol>
	</body>
</html>

在这里插入图片描述

Asteroid 325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
067|自定义byClassName方法

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> /* node.getElementsByClassName() */ function elementsByClassName(node,classStr){ //1.获取node这个节点下所有的子节点 .
复制链接

扫一扫

专栏目录