javascript,Dom编程,递归案例

最新推荐文章于 2024-06-20 20:20:21 发布

程宇寒

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量219

点赞数

文章标签： javascript dom 递归

本文链接：https://blog.csdn.net/czh500/article/details/84892096

版权

javascript,Dom编程,递归案例

<html>
<head>
<meta charset="UTF-8">
<title>javascript,Dom编程,递归案例,雪豹软件工作室</title>
<link rel="stylesheet" type="text/css" href="mark.css">
<link rel="stylesheet" type="text/css" href="input2.css">
<link rel="stylesheet" type="text/css" href="body.css">
<script type="text/javascript">

	/*递归案例(该案例是通过递归，循环遍历该html整个页面中的所有元素)*/
	
	/*dom编程就是为了动态(在代码运行之后)的给文档(dom树)添加一些节点或删除一些节点，或者得到修改节点的属性  */
	
	//递归(查找出document中的所有元素)
	function showAllElements(node){
		var childrens = node.childNodes; //获取该节点下的所有子节点(是个数组)
		/*
		用alert()会弹出太多次，太烦了，所以就用console.log()这种打印到控制台的方式，所以想要看到这些打印的信息，请打开浏
		览器的调试功能，在调试界面找到控制台，即可看到这些打印信息(最好是用火狐浏览器或者是用谷歌浏览器)
		*/
		console.log("当前节点信息：" + "节点类型 = " + node.nodeType + " 节点名称 = " + node.nodeName + " 该节点下有" + childrens.length + "个子节点！");
		for (var i = 0; i < childrens.length; i++) {
			console.log("-------此时i = " + i + "-------");
			console.log("当前节点信息是" + node.nodeName + "节点下的，"  + "节点类型 = " + childrens[i].nodeType + " 节点名称 = " + childrens[i].nodeName);
			showAllElements(childrens[i]);
			console.log("**********此时i = " + i + "********");
		}
	}
</script>
</head>
<body>
<div id="myDiv">
<input name="userName"><br>
<input type="button" value="查看该html整个页面中的所有元素" onclick="showAllElements(document)">
</div>
</body>
</html>

程宇寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript,Dom编程,递归案例

javascript,Dom编程,递归案例&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;javascript,Dom编程,递归案例,雪豹软件工作室&lt;/title&gt;&lt;link rel="stylesheet" type="text/css" href
复制链接

扫一扫