查找HTML下所有的节点名称，节点类型，节点值，所有节点的属性名称类型值

最新推荐文章于 2022-07-24 16:55:12 发布

java_zhaoyanli

最新推荐文章于 2022-07-24 16:55:12 发布

阅读量816

点赞数

分类专栏： Java 文章标签： html节点

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/41522997

版权

Java 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这篇博客通过两个JavaScript脚本示例，展示了如何在DOM加载完成后遍历HTML文档中的所有节点，包括节点名称、类型、值，以及节点的属性名称、类型和值。通过window.onload事件触发函数，对document.documentElement进行迭代，递归遍历了所有子节点，并用document.write打印节点信息。

摘要由CSDN通过智能技术生成

1.dom1.js

//当窗体加载完毕，触发匿名对象
window.οnlοad=function(){
//DOM对象
//获取的是根节点html
var dom=document.documentElement;//节点node

//遍历所有的节点
itertorNodes(dom);
};
function itertorNodes(dom){
//节点名称  节点类型   节点值
document.write("节点名称："+dom.nodeName+",节点类型："+dom.nodeType+",节点值："+dom.nodeValue);
//首先要判断是否有孩子节点
if(dom.hasChildNodes()){
  //获取该节点的孩子节点
  var nodes=dom.childNodes;
  for(var i=0;i
   varcnode=nodes.item(i);
   itertorNodes(cnode);
  }
  document.write("看：：："+nodes.length);
}else{
  document.write("没有孩子节点"+"
");
}
};

2.dom1.html

哈哈哈

3,查找结果如下:

节点名称：HTML,节点类型：1,节点值：null节点名称：HEAD,节点类型：1,节点值：null节点名称：#text,节点类型：3,节点值：没有孩子节点
节点名称：TITLE,节点类型：1,节点值：null节点名称：#text,节点类型：3,节点值：js1.html没有孩子节点
看：：：1节点名称：#text,节点类型：3,节点值：没有孩子节点
节点名称：META,节点类型：1,节点值：null没有孩子节点
节点名称：#text,节点类型：3,节点值：没有孩子节点
节点名称：META,节点类型：1,节点值：null没有孩子节点
节点名称：#text,节点类型：3,节点值：没有孩子节点
节点名称：META,节点类型：1,节点值：null没有孩子节点
节点名称：#text,节点类型：3,节点值：没有孩子节点
节点名称：#comment,节点类型：8,节点值：没有孩子节点
节点名称：#text,节点类型：3,节点值：没有孩子节点
节点名称：SCRIPT,节点类型：1,节点值：null没有孩子节点
节点名称：#text,节点类型：3,节点值：没有孩子节点
看：：：13节点名称：#text,节点类型：3,节点值：没有孩子节点
节点名称：BODY,节点类型：1,节点值：null节点名称：#text,节点类型：3,节点值：没有孩子节点
节点名称：H1,节点类型：1,节点值：null节点名称：#text,节点类型：3,节点值：哈哈哈没有孩子节点
看：：：1节点名称：#text,节点类型：3,节点值：没有孩子节点
看：：：3看：：：3

另一种写法：

1，don1.js

//当窗体加载完毕，触发匿名对象
window.οnlοad=function(){
//DOM对象
//获取的是根节点html
var dom=document.documentElement;//节点node

//遍历所有的节点
itertorNodes(dom);

//写一个属性节点
//document.getElementById_x_x("xy");

};
function itertorNodes(dom){
//节点名称  节点类型   节点值
document.write("节点名称："+dom.nodeName+",节点类型："+dom.nodeType+",节点值："+dom.nodeValue);
//遍历属性
itertorNodeAttr(dom);
//首先要判断是否有孩子节点
if(dom.hasChildNodes()){
  //获取该节点的孩子节点
  var nodes=dom.childNodes;
  for(var i=0;i
   varcnode=nodes.item(i);
   itertorNodes(cnode);
  }
}else{
  document.write("没有孩子节点"+"
");
}
}

function itertorNodeAttr(elementNode){

  //判断是否是元素节点
  if(elementNode.nodey==1){
   //获取节点属性
   varattrs=elementNode.attributes;
   //遍历
   for(varj=0;j
    varattr=attrs.item(j);
document.write("节点名称："+attr.nodeName+",节点类型："+attr.nodeType+",节点值："+attr.nodeValue);