我正在尝试递归地逐步浏览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, ' ');
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, ' ');
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
。