Plain JavaScript: Getting children of body returns undefined

Question

我正在尝试获取 <body> 元素的所有 child 元素，但它不起作用。由于某种原因，它总是 returns 未定义。

我在 Whosebug 上发现了类似的问题，但它们都有更长的代码。希望这个简单的问题能得到一个简单的答案。

JSFiddle link: https://jsfiddle.net/mkeacdsw/10

HTML:

<body>
<div>
</div>
</body>

JavaScript:

console.log("Below here");
console.log(document.getElementsByTagName("body"));
console.log(document.getElementsByTagName("body").children);
console.log("Above here");

如果您打开浏览器控制台，您将看到：

如您所见，它成功获取了 <body> 元素，但未获取其 children.

这到底是怎么回事？如何获得 <body> 的所有 children？我已经尝试用 childNodes 替换 children 但它仍然不起作用。

Answer 1

document.getElementsByTagName returns 一个集合，而不是 DOM 元素，它是 children 属性所在的位置。

你想要

console.log(document.getElementsByTagName("body")[0].children);

Answer 2

childNodes 不是 children。

console.log("Below here");
document.querySelector('body').childNodes.forEach(n => {
  console.log(n);
});
console.log("Above here");

<body>
<div>
</div>
</body>

Answer 3

改用document.body：

console.log("Below here");
console.log(document.body);
console.log(document.body.children);
console.log("Above here");

<div></div>
<p></p>
<p></p>
<p></p>

Plain JavaScript: Getting children of body returns undefined

Plain JavaScript: Getting children of body returns undefined

javascript

html

children