Javascript Java脚本：递归地遍历Dom以获取关联的HTML文件，并打印遇到的元素类型_Javascript_Html_Dom_Recursion

Javascript Java脚本：递归地遍历Dom以获取关联的HTML文件，并打印遇到的元素类型

javascript html dom recursion

Javascript Java脚本：递归地遍历Dom以获取关联的HTML文件，并打印遇到的元素类型,javascript,html,dom,recursion,Javascript,Html,Dom,Recursion,我想写一个简单的JavaScript程序，它将递归地遍历用于关联HTML文件的DOM，并打印遇到的元素类型（嵌入数据不需要打印），缩进以反映HTML文档的层次结构我不知道我的代码出了什么问题，但是递归部分没有给出正确的输出任何帮助都将不胜感激。谢谢输出 Top 3 Channel 3 Thai actresses: 1.Yaya Urassaya 2.Kimberly Ann Voltemas 3.Margie Rasri Balenciaga [obje

我想写一个简单的JavaScript程序，它将递归地遍历用于关联HTML文件的DOM，并打印遇到的元素类型（嵌入数据不需要打印），缩进以反映HTML文档的层次结构

我不知道我的代码出了什么问题，但是递归部分没有给出正确的输出

任何帮助都将不胜感激。谢谢

输出

Top 3 Channel 3 Thai actresses: 

    1.Yaya Urassaya
    2.Kimberly Ann Voltemas
    3.Margie Rasri Balenciaga

[object Text], nodeName: #text, nodeType: 3, innerHTML: undefined
[object Text], nodeName: #text, nodeType: 3, innerHTML: undefined
[object HTMLLIElement], nodeName: LI, nodeType: 1, innerHTML: Yaya Urassaya
[object Text], nodeName: #text, nodeType: 3, innerHTML: undefined
[object Text], nodeName: #text, nodeType: 3, innerHTML: undefined
[object HTMLLIElement], nodeName: LI, nodeType: 1, innerHTML: Kimberly Ann Voltemas
[object Text], nodeName: #text, nodeType: 3, innerHTML: undefined
[object Text], nodeName: #text, nodeType: 3, innerHTML: undefined
[object HTMLLIElement], nodeName: LI, nodeType: 1, innerHTML: Margie Rasri Balenciaga
[object Text], nodeName: #text, nodeType: 3, innerHTML: undefined

正确输出

Top 3 Channel 3 Thai actresses: 

    1.Yaya Urassaya
    2.Kimberly Ann Voltemas
    3.Margie Rasri Balenciaga

[object Text], nodeName: #text, nodeType: 3, innerHTML: undefined
[object HTMLLIElement], nodeName: LI, nodeType: 1, innerHTML: Yaya Urassaya
[object Text], nodeName: #text, nodeType: 3, innerHTML: undefined
[object HTMLLIElement], nodeName: LI, nodeType: 1, innerHTML: Kimberly Ann Voltemas
[object Text], nodeName: #text, nodeType: 3, innerHTML: undefined
[object HTMLLIElement], nodeName: LI, nodeType: 1, innerHTML: Margie Rasri Balenciaga
[object Text], nodeName: #text, nodeType: 3, innerHTML: undefined

我的HTML文件

    <!doctype html>
       <HTML>
       <HEAD>
       </HEAD>
       <BODY>
           <P> Top 3 Channel 3 Thai actresses: </P>
           <ol>
           <li>Yaya Urassaya</li>
           <li>Kimberly Ann Voltemas</li>
           <li>Margie Rasri Balenciaga</li>
           </ol> 
         <div id="idDiv"></div>
         <script type="text/javascript" 
          src="A3Q4.js"> 
         </script>
      <BODY>
      </HTML>


 泰国第三频道前三名女演员：
亚亚乌拉萨亚
金伯利·安·沃尔特马斯
玛吉·拉斯里·巴黎世家

我的Javascript文件

 var element = document.getElementById("idDiv");

 function printNodeInfo(node) 
 {
   element.innerHTML += node;
   element.innerHTML += ", nodeName: " + node.nodeName;
   element.innerHTML += ", nodeType: " + node.nodeType;
   element.innerHTML += ", innerHTML: " + node.innerHTML;
   element.innerHTML += "<br>";
 }

 // Get a handle of the ordered-list node.
 var orderedlistNode = document.getElementsByTagName("ol")[0];
 theDOMElementWalker(orderedlistNode);

 function theDOMElementWalker(node) 
 {
   if (node.nodeType == 1) 
   { 
      node = node.firstChild;

      while (node) 
      {
        theDOMElementWalker(node);
        printNodeInfo(node);
        node = node.nextSibling;
      }
   }
 }
 element.innerHTML += "<br>";

var-element=document.getElementById（“idDiv”）；
函数printNodeInfo（节点）
{
element.innerHTML+=节点；
element.innerHTML+=”，nodeName:“+node.nodeName；
element.innerHTML+=”，节点类型：“+node.nodeType；
element.innerHTML+=”，innerHTML:“+node.innerHTML；
element.innerHTML+=“
”；
}
//获取有序列表节点的句柄。
var orderedlistNode=document.getElementsByTagName（“ol”）[0]；
DomelementWalker（orderedlistNode）；
DomeElementWalker功能（节点）
{
if（node.nodeType==1）
{ 
node=node.firstChild；
while（节点）
{
家庭步行者（节点）；
printNodeInfo（节点）；
node=node.nextSibling；
}
}
}
element.innerHTML+=“
”；

问题是，即使它不可见，dom树中的元素之间也可能有空文本节点，使用类似

content

的标记，现在在

div

和

span

之间打开一个空格，它将在dom树中创建文本节点，因此，如果文本节点为空，您可以选择将其排除，以获得预期结果

var-element=document.getElementById（“idDiv”）；
函数printNodeInfo（节点）{
if（node.nodeType==node.TEXT\u node&&！node.nodeValue.trim（））{
返回；
}
element.innerHTML+=节点；
element.innerHTML+=”，nodeName:“+node.nodeName；
element.innerHTML+=”，节点类型：“+node.nodeType；
element.innerHTML+=”，innerHTML:“+node.innerHTML；
element.innerHTML+=“
”；
}
//获取有序列表节点的句柄。
var orderedlistNode=document.getElementsByTagName（“ol”）[0]；
DomelementWalker（orderedlistNode）；
DomeElementWalker功能（节点）{
if（node.nodeType==1）{
node=node.firstChild；
while（节点）{
家庭步行者（节点）；
printNodeInfo（节点）；
node=node.nextSibling；
}
}
}
element.innerHTML+=“
”
泰国第三频道前三名女演员：
亚亚乌拉萨亚
金伯利·安·沃尔特马斯
玛吉·拉斯里·巴黎世家
您可以使用内置的TreeWalker类