递归单步执行 HTML DOM 并打印属性

Recursively Stepping through HTML DOM and printing Attributes

本文关键字：打印 属性 DOM HTML 单步 执行 递归      更新时间：2023-09-26

我正在尝试递归地逐步浏览HTML文档的DOM，并打印节点的名称，同时使用缩进来标识子节点。我修改了一个w3schools代码示例，结果是：

<!DOCTYPE html>
<html>
<head>
<title> Test Example </title>
</head>
<body>
<p>Click the button to get the node names of the body element's child nodes.</p>
<button onclick="myFunction(document.documentElement)">Try it</button>
<p><strong>Note:</strong> Whitespace inside elements is considered as #text, and text is considered as nodes.</p>
<!-- My personal comment goes here..  -->
<div><strong>Note:</strong> Comments in the document are considered as #comments, and comments are also considered as nodes.</div>
<p id="demo"></p>
<script>
function myFunction(node) {
indent = "";
txt = node.nodeName + "<br>";
document.write(txt);
var c = node.childNodes;
var i;
for (i = 0; i < c.length; i++) {
    myFunction(c[i], indent);
}    
}
function myFunction(node, indent) {
var indent = indent + "   ";
txt = indent + node.nodeName + "<br>";
document.write(txt);
var c = node.childNodes;
var i;
for (i = 0; i < c.length; i++) {
    txt = c[i].nodeName + "<br>"; 
    myFunction(c[i], indent);
}  
}
</script>
</body>
</html>

我得到的结果是：

undefined HTML
undefined HEAD
undefined #text
undefined TITLE
undefined #text
undefined #text
undefined #text
undefined BODY
undefined #text
undefined P
undefined #text
undefined #text
undefined BUTTON
undefined #text
undefined #text
undefined P
undefined STRONG
undefined #text
undefined #text
undefined #text
undefined #comment
undefined #text
undefined DIV
undefined STRONG
undefined #text
undefined #text
undefined #text
undefined P
undefined #text
undefined SCRIPT
undefined #text
undefined #text

所以我有几个问题1）为什么它不打印带有节点名称的缩进值，而是打印undefined？2）如果我只要求节点名称，为什么还要打印 #text 行和 #comments 行？

我对HTML和javascript很陌生，所以任何见解都会有所帮助

编辑

我解决了第二个问题，但我仍然遇到第一个问题。我的脚本现在看起来像 

<script>
function myFunction(node) {
    var indent = "";
    txt = node.nodeName + "<br>";
    document.write(txt);
    var c = node.children;
    var i;
    for (i = 0; i < c.length; i++) {
        myFunction(c[i], indent);
    }    
}
function myFunction(node, indent) {
    indent = indent + "    ";
    txt = indent + node.nodeName + "<br>";
    txt = txt.replace(/ /g, '&nbsp;');
    document.write(txt);
    var c = node.children;
    var i;
    for (i = 0; i < c.length; i++) {
        txt = c[i].nodeName + "<br>"; 
        myFunction(c[i], indent);
    }  
}
and my output looks like 
undefined    HTML
undefined        HEAD
undefined            TITLE
undefined        BODY
undefined            P
undefined            BUTTON
undefined            P
undefined                STRONG
undefined            DIV
undefined                STRONG
undefined            P
undefined            SCRIPT

我显然仍然缺少一些东西，但我不明白是什么

编辑 2

感谢下面的帮助，我解决了我的问题，我在第二个 myfunction（现在称为 myfunction1）的循环中调用了错误的函数

<!DOCTYPE html>
<html>
<head>
<title> Test Example </title>
</head>
<body>
<p>Click the button to get the node names of the body element's child nodes.</p>
<button onclick="myFunction(document.documentElement)">Try it</button>
<p><strong>Note:</strong> Whitespace inside elements is considered as #text, and text is considered as nodes.</p>
<!-- My personal comment goes here..  -->
<div><strong>Note:</strong> Comments in the document are considered as #comments, and comments are also considered as nodes.</div>
<p id="demo"></p>
<script>
function myFunction(node) {
    var indent = "";
    var txt = node.nodeName + "<br>";
    document.write(txt);
    var c = node.children;
    var i;
    for (i = 0; i < c.length; i++) {
        myFunction1(c[i], indent);
    }    
}
function myFunction1(node, indent) {
    indent = indent + "      ";
    txt = indent + node.nodeName + "<br>";
    txt = txt.replace(/ /g, '&nbsp;');
    document.write(txt);
    var c = node.children;
    var i;
    for (i = 0; i < c.length; i++) {
        txt = c[i].nodeName + "<br>"; 
        myFunction1(c[i], indent);
    }  
}
</script>
</body>
</html>

现在输出 

HTML
      HEAD
            TITLE
      BODY
            P
            BUTTON
            P
                  STRONG
            DIV
                  STRONG
            P
            SCRIPT

1）为什么它不打印带有节点名称的缩进值，而是打印undefined？

您有 2 个同名函数，请确保您运行的是正确的函数并提供正确的参数。从更新的输出中，可以使用这样的代码在首次调用时将indent初始化为空字符串。

function myFunction(node, indent) {
    indent = (indent || "") + "    ";

2）如果我只要求节点名称，为什么还要打印 #text 行和 #comments 行？

因为这些也是节点（并且它们有名称），并且您不会在代码中筛选它们。如果要排除元素，请考虑仅递归元素，而不是所有具有.children的 DOM 节点，而不是.childNodes。

1） 为什么它不打印带有节点名称的缩进值，而是打印未定义？

您有两个同名的函数，这意味着第二个函数将覆盖第一个函数。因此，您实际上是在调用第二个版本，而不是将任何内容传递给indent参数。

2）如果我只要求节点名称，为什么还要打印 #text 行和 #comments 行？

每个节点都有一个.nodeName，因此您可以获得每个节点的名称。如果您只需要元素，请使用 if 语句，并检查其node.nodeType === 1 。

相关文章：