我的JavaScript代码中childNodes无法正常工作，求解决原因

核心问题分析 #

• 变量作用域与执行时机错误：y是here函数内的局部变量，函数外部的alert无法访问它。而且这段alert代码会在页面加载时立即执行，此时here函数还未被调用，y根本没定义。
• HTML结构不合法：<h1>标签放在了<html>和<body>之间，所有页面可见内容必须放在<body>标签内部。
• childNodes特性误解：childNodes会包含所有类型的节点（包括换行、空格这类空白文本节点），直接取y[1]大概率不是你想要的<p>元素，访问其innerHTML会报错。

修正后的代码 #

JavaScript代码

function here() {
  var x = document.body;
  var y = x.childNodes;
  // 过滤文本节点，仅保留元素节点
  var elementNodes = Array.from(y).filter(node => node.nodeType === 1);
  // 弹出第一个p元素的内容
  window.alert(elementNodes[1].innerHTML);
}

HTML代码

<html>
<body>
  <h1 onclick="here()">
    click here!
  </h1>

  <p>
    Just some text!
  </p>

  <p>
    Another text!
  </p>
</body>
</html>

更简便的替代方案 #

如果只想获取子元素节点，推荐使用children属性，它只会返回元素节点，无需手动过滤：

function here() {
  var x = document.body;
  var y = x.children;
  // y[1]对应第一个p元素（y[0]是h1）
  window.alert(y[1].innerHTML);
}

内容的提问来源于stack exchange，提问作者BBA