Question

我想编写一个简单的JavaScript程序，它将以递归方式遍历 DOM用于关联的HTML文件并打印遇到的元素的类型（不需要打印嵌入数据），缩进以反映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>";

Answer 1

问题是，即使它不可见，dom树中的元素之间也可能有空文本节点，请使用<div> <span>content</span></div>之类的标记，现在位于div和{{1}之间打开有一个空格，它将在dom树中创建一个文本节点，因此你可以排除文本节点（如果它是空的）以获得预期的结果。

＆＃13;

span

＆＃13;

var element = document.getElementById("idDiv");

function printNodeInfo(node) {
  if (node.nodeType == Node.TEXT_NODE && !node.nodeValue.trim()) {
    return;
  }
  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>";

＆＃13;

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

1 个答案: