在自己的代码块中调用外部函数的说明

Question

我是 JavaScript 的新手。我在一本书中找到了这个例子。本章讨论了节点类型，但没有彻底解释示例。我需要帮助来理解测试函数中 while 循环中发生的事情。

我的理解是，当父元素不再有子元素时，while 循环结束。但是程序会一直等到找不到子元素，从而允许它控制日志节点吗？不知道顺序是什么

如果有人能通俗易懂地向我解释一下这个功能是如何运作的，我将不胜感激。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript</h1>
<h2><img><a><span></span></a></img></h2>
<h3><img></img></h3>

<script>
function testing(node){
    if(node.nodeType == node.ELEMENT_NODE){
        console.log(node.tagName);
        node = node.firstChild;
        
        while(node){
            testing(node)
            node = node.nextSibling;
            console.log(node);
        }
    }
}


let boom = document.querySelector("h2");
testing(boom);

</script>

</body>
</html>

Answer 1

该脚本是运行一个遍历 HTML 节点的递归函数。它向下钻取 DOM 结构，直到找不到子元素，然后遍历兄弟元素列表，直到找到另一个子元素（通过递归函数）并重复查找更多子元素输出是

H2       (First element)
IMG      (Child of H2)
<a>…</a> (Sibling of IMG)
A        (First element of sibling)
SPAN     (Child of A)
null
null
null
null
null
null

最后的null是满足递归退出条件并打印出没有有效元素的结果
最初它令人困惑，因为 IMG 看起来像它有一个子 () 但 HTML 被渲染成这样

<h2>
    <img>
    <a>
       <span>
       </span>
    </a>
</h2>

为了获得完整的理解，我会看看什么是递归
https://www.geeksforgeeks.org/recursion/
并阅读节点元素是什么以了解脚本本身是什么运行 https://developer.mozilla.org/en-US/docs/Web/API/Node

Answer 2

递归通常用来简化问题；这是 opposite.

理解这一点的最简单方法是实际遍历函数。

1. 从 h2 作为第一个 node 开始，检查它是否是 node 并记录它。

2. 将node(h2 currently)的第一个child，也就是img赋值给node.

3. 检查 while 条件中的 node，如果是：使用 node(img) 调用测试，记录 img .

(#这里我们输入递归)

#4. 分配给 node img 的第一个 child，即 null，所以我们省略了循环。

(#这里我们退出递归，node包含img)

5. 分配 img 的下一个兄弟 a，log <a><span></span><a>.

6. 在while条件中检查node，如果是：用node(a).

调用测试

(#这里我们输入递归)

#7 记录 a 的标记名，即 A，获取 a 的第一个 child，即span.

(##这里我们输入递归)

##8 记录标记名 os span 即 SPAN，将 span 的第一个 child 分配给 node 即 null.

##9 在 while 条件下检查 node，如果为假：我们回到 node 且 span。

##10 分配 span 的下一个兄弟，它是空的，记录它。

##11 检查 while 条件中的 node，如果为假：我们回到 a.

的递归调用

(##这里我们退出递归)

#12 将 a 的下一个兄弟节点分配给节点，该节点为空。

#13 在while条件中检查node，如果为假：退出递归调用'a'。

(#这里我们退出递归)

14 结束函数调用。

#（表示递归的层次）

希望这对您有所帮助，但理想情况下您应该自己调试代码并逐步完成。

您可以通过将文件拆分为 index.html 和 index.js，在 index.html 中写入 <script src="index.js"></script> 并通过在 [=47 上放置断点来遍历=] 行在 chrome 调试器中。

在自己的代码块中调用外部函数的说明

Explanation for calling the outer function within its own code block

javascript

function

while-loop

nodes