时间戳

首页 > 解决方案 > 在自己的代码块中调用外部函数的说明

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

问题描述

我是 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>

标签： javascriptfunctionwhile-loopnodes

解决方案

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

H2       (First element)
IMG      (Child of H2)
<a>​…​&lt;/a>​ (Sibling of IMG)
A        (First element of sibling)
SPAN     (Child of A)
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

推荐阅读