遍历整个html文档并打印出该html文档中的所有文本节点属性节点元素节点

最新推荐文章于 2024-10-24 10:05:54 发布

原创最新推荐文章于 2024-10-24 10:05:54 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#文档 #html #function

这段JavaScript代码展示了如何在HTML文档加载完成后遍历并打印所有文本节点、属性节点和元素节点的信息。通过window.onload事件触发，从document.documentElement开始，递归地访问每个节点及其属性，并使用display函数展示节点的详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
<!--
    //当整个窗体加载完毕之后 触发该匿名函数
	window.onload = function(){
		//document   获取根元素
		var root = document.documentElement;
		//遍历所有的节点
		iteratorNodes(root);
		document.write(msg);
	}
	function iteratorNodes(node){
		//遍历元素节点
		display(node);
			//判断是否是元素节点
		if(node.nodeType==1){
			//判断是否有属性节点     遍历该元素节点的 所有属性节点
			for(var i=0;i<node.attributes.length;i++){
				var attr = node.attributes.item(i);
				if(attr.specified){
					display(attr);
				}
			}
			//判断该元素节点是否有孩子节点
			if(node.hasChildNodes()){
				//得到所有的子节点
				var sonnodes = node.childNodes;
				//遍历所有的节点
				for(var i=0;i<sonnodes.length;i++){
					//得到具体的某个子节点
					var sonnode = sonnodes.item(i);
					iteratorNodes(sonnode);
				}
			}
		}else{
			display(node);
		}
	}
	var msg = " ";
	function display(nodeDom){
		msg+=("<br/>"+"节点的名称:" + nodeDom.nodeName + "节点的value值:" + nodeDom.nodeValue + "节点的类型值:" + nodeDom.nodeType+"\r\n"+"<br/>");
	}
	function test1(){
		//整个文档是一个document对象
		//document.getElementById("id");
		//根据指定的id名称获取 指定的dom对象 节点对象
		var inputDom = document.getElementById("uname");
		//inputDom是什么节点:元素节点   元素节点的名称:nodeName:input
		//节点的value值:null
		//nodeType:1
		
		//打印属性的值
		alert(inputDom.type)
		display(inputDom);
		
		//获取元素节点的属性   只有元素节点才有属性
		if (inputDom.nodeType == 1) {
			//得到所有属性
			var attrs = inputDom.attributes;
			//遍历出所有当前元素节点的所有属性
			for (var i = 0; i < attrs.length; i++) {
				//得到具体的某个属性
				var attr = attrs.item(i);
				//判断此属性是否存在
				if (attr.specified) {
					display(attr);
				}
			}
		}
	}
	
//-->

	
</script>