document.getElementsByTagName没有'不起作用.如何获取body的NodeList的长

document.getElementsByTagName doesn't work. How can I get the length of NodeList of body?

本文关键字：获取 body 的长 NodeList 何获取 没有 getElementsByTagName 不起作用 document      更新时间：2023-09-26

我想获取body标记的长度或项。但是，似乎getElementsByTagName在NodeList方面不起作用。我该怎么做？

 <script type=text/javascript>
 var b = document.getElementsByTagName('body');                                                                                                                            
 console.log(b);         // <body>...</body>
 console.log(b.length);  // 0    
 console.log(b[0]);      // undefined
 console.log(b.item(0)); // null
 </script>

谢谢。

[编辑]我加了整个身体。

<html>
<head>
<script type=text/javascript>
 var b = document.getElementsByTagName('body');                                                                                                                            
 console.log(b);         // <body>...</body>
 console.log(b.length);  // 0    
 console.log(b[0]);      // undefined
  console.log(b.item(0)); // null
</script>
</head>
<body>
<div id='test'>
<h2>Hello</h2>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>

将脚本放在页面的末尾，或者将其放在函数中，并在加载整个页面后调用它。

将脚本代码放在主体元素关闭之后。如果在创建元素之前尝试访问该元素，则找不到该元素。例如，以下内容应该会给您预期的结果：

<html>
<head>
</head>
<body>
<div id='test'>
<h2>Hello</h2>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
<!-- script code moved -->
<script type=text/javascript>
 var b = document.getElementsByTagName('body');                                                                                                                            
 console.log(b);         // <body>...</body>
 console.log(b.length);  // 0    
 console.log(b[0]);      // undefined
  console.log(b.item(0)); // null
</script>
</html>

如果您想要文档中所有节点的列表，请尝试：document.getElementsByTagName('*')或document.querySelectorAll('*')。文档中（通常）只有一个<body>-标记，因此document.getElementsByTagName('body')的长度应该是1。

如果您需要文档<body>中所有元素的列表，请使用：

document.getElementsByTagName('body')[0].getElementsByTagname('*');

您必须在文档加载后将其放置。您可以将它放在主体的最后，也可以在触发指示DOM准备就绪的事件之前不执行代码。在<head>标记中有它的地方，还没有<body>标记——它还没有创建。这就是为什么您的代码在您的示例中不起作用（现在您已经包含了完整的示例）。

一旦你把代码放在一个安全的地方，让它在加载DOM后执行，你的代码在Chrome中对我来说非常好。我得到这个输出：

[<body>​</body>​]
1
<body>​</body>​
<body>​</body>​

这个代码有什么意义？正好有一个<body>标记，您可以随时将其引用为document.body。

它不起作用的原因只是因为脚本是在加载元素之前运行的。

更改

<html>
<head>
<script type=text/javascript>
 var b = document.getElementsByTagName('body');                                                                                                                            
 console.log(b);         // <body>...</body>
 console.log(b.length);  // 0    
 console.log(b[0]);      // undefined
  console.log(b.item(0)); // null
</script>
</head>
<body>
<div id='test'>
<h2>Hello</h2>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>

收件人：

<html>
<head>
</head>
<body>
<div id='test'>
<h2>Hello</h2>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<script type=text/javascript>
 var b = document.getElementsByTagName('body');                                                                                                                            
 console.log(b);         // <body>...</body>
 console.log(b.length);  // 0    
 console.log(b[0]);      // undefined
  console.log(b.item(0)); // null
</script>
</body>
</html>

然后它将毫无问题地运行。

相关文章：