递归函数只正确返回一个值

Question

所以我正在为学校开发一个 JavaScript 项目。 它使用递归函数在网页上的文章元素中创建所有节点的树。 实际的文章元素使用 makeBranches 函数来计算每种类型的节点存在多少。 它记录元素节点、文本节点、空白节点和总节点的数量，并在其中一个段落中列出这些。 但是，除了元素节点外，所有计数都比应有的值低 1。

编辑：这是可重现的示例。 页面上的数字在第一个 h1 和 h2 标题下的第二段中给出。 我添加了 CSS 代码以突出显示红色的数字。 makeBranches 函数应返回总共 238 个节点、98 个元素节点、140 个文本节点和 57 个空白节点。 但是除了元素节点之外的所有计数都比应有的值少一。

 "use strict"; /* the global variables used to store the totals of each type of node; total nodes, element nodes, text nodes, and whitespace nodes*/ var nodeCount = 0; var elemCount = 0; var textCount = 0; var wsCount = 0; // runs the makeTree function upon page loading window.onload = makeTree; function makeTree() { var nodeList = document.createElement("ol"); // creates variable "sourceArticle" as a reference to the article element with the id "main" var sourceArticle = document.querySelector("#main article"); // calls the "makeBranches" function with "sourceArticle" and "nodeList" as parameters makeBranches(sourceArticle, nodeList); // outputs the totals of the nodes after calling the "makeBranches" function document.getElementById("totalNodes").innerHTML = nodeCount; document.getElementById("elemNodes").innerHTML = elemCount; document.getElementById("textNodes").innerHTML = textCount; document.getElementById("wsNodes").innerHTML = wsCount; } // this recursive function is supposed to tally the totals of the nodes function makeBranches(treeNode, nestedList) { // increments "nodeCount" nodeCount++; // checks to see if the current node is a node of type 1 (element) if (treeNode.nodeType === 1) { // if true, increments "elemCount" elemCount++; } //checks to see if the current node is a node of type 3 (text node) if (treeNode.nodeType === 3) { // if true, increments "textCount" textCount++; // extracts the text string from the current node var textString = treeNode.nodeValue; // checks to see if the text string is whitespace or not if (isWhiteSpaceNode(textString) === true) { // if true, increments "wsCount" wsCount++; } } // checks to see if there are any remaining nodes if (treeNode.childNodes.length > 0) { var newList = document.createElement("ol"); // recursion loop; calls this function again for every node remaining for (var n = treeNode.firstChild; n !== null; n = n.nextSibling) { // calls this function again with the parameters "n" and "newList" makeBranches(n, newList); } } } // this function checks to see if the given parameter is whitespace or not function isWhiteSpaceNode(tString) { return !(/[^\t\n\r ]/.test(tString)); }

 span { color: red}

 <!DOCTYPE html> <html> <head> <!-- New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 12 Case Problem 3 Node Tree Map Author: Matthew Wheeler Date: 6-27-2022 Filename: js_nodes.html --> <title>JSWorks Node Tree</title> <meta charset="utf-8" /> <link href="js_base.css" rel="stylesheet" /> <link href="js_layout.css" rel="stylesheet" /> <link href="js_tree.css" rel="stylesheet" /> <script src="js_tree.js" async></script> </head> <body> <section id="page"> <header> Customized Web Tools and Tutorials <img src="js_logo.png" alt="JSWorks" /> <div> <label for="sBox">Search Topic</label> <input type="search" id="sBox" name="sBox" /> </div> </header> <nav class="horizontal"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Apps</a></li> <li><a href="#">Sample Code</a></li> <li><a href="#">White Papers</a></li> <li><a href="#">Browser Charts</a></li> <li><a href="#">Reference</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> <section id="main"> <article id="topArticle" class="aClass"> <h1>Working with Nodes</h1> <h2>Understanding the Node Tree</h2> <p>JavaScript organizes an HTML document in a tree structure known as a <dfn>node tree</dfn>. Each HTML element, comment, and text string is stored within the tree as a separate node. </p> <p>The box on the right shows the node tree for this article. Note that line returns and blank spaces between element tags are counted as text nodes and appear in the node tree as white space nodes. In this article there are <span id="totalNodes"></span> total nodes, comprised of <span id="elemNodes"></span> element nodes, and <span id="textNodes"></span> text nodes (containing <span id="wsNodes"></span> white space nodes). </p> <h2>The Familial Relationship of Nodes</h2> <p>Nodes in the node tree have a familial relationship, where each node acts as a parent, child, and sibling of other nodes. This relationship is expressed using the form </p> <code><em>node</em>.<em>relationship</em></code> <p>where <code><em>node</em></code> is a currently selected node or object and <code><em>relationship</em></code> is the relationship of another node to the current node. For example, the expression </p> <code><em>node</em>.parentNode</code> <p>refers to the parent of <code><em>node</em></code>. In an HTML document the parent of the <code>body</code> node is the <code>html</code> node, and the parent of the <code>html</code> node is the <code>document</code> node, which represents the entire document. The table below describes the other familial relationships under the document object model. </p> <table id="t1"> <thead> <tr> <th>Expression</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code><em>node</em>.firstChild</code></td> <td>The first child of <code><em>node</em></code>.</td> </tr> <tr> <td><code><em>node</em>.lastChild</code></td> <td>The last child of <code><em>node</em></code>.</td> </tr> <tr> <td><code><em>node</em>.childNodes</code></td> <td>A collection of all of the nodes contained within <code><em>node</em></code>.</td> </tr> <tr> <td><code><em>node</em>.previousSibling</code></td> <td>The sibling prior to <code><em>node</em></code>.</td> </tr> <tr> <td><code><em>node</em>.nextSibling</code</td> <td>The sibling after <code><em>node</em></code>.</td> </tr> <tr> <td><code><em>node</em>.ownerDocument</code></td> <td>The root node of the document</td> </tr> <tr> <td><code><em>node</em>.parentNode</code></td> <td>The parent of <code><em>node</em></code>.</td> </tr> </tbody> </table> <h2>Node Types, Names, and Values</h2> <p>JavaScript provides the following properties to determine each node's type, name, and value: </p> <code> <em>node</em>.nodeType<br /> <em>node.</em>nodeName<br /> <em>node.</em>nodeValue<br /> </code> <p>The <code><em>nodeType</em></code> property returns an integer indicating whether the node refers to an element, a text string, a comment, an attribute, and so on. The <code><em>nodeName property</em></code> returns the name of the node within the document. Finally, the <code><em>nodeValue</em></code> property returns the node's value. </p> </article> </section> <footer> JSWorks &copy; 2018 (US) <span> <a href="#">About</a> <a href="#">Terms</a> <a href="#">Help</a> </span> </footer> </section> </body> </html>

Answer 1

<td><code><em>node</em>.nextSibling</code</td>

这里的代码标签忘记关闭