Javascript教程，“ childNodes”解决方案不起作用

Question

我正在做（强烈推荐）JavaScript教程（ http://www.newthinktank.com/2015/09/learn-javascript-one-video/ ），但其中一种解决方案无效。 我正在尝试更改第一段的背景色，没有出现任何错误，并且“开发人员工具”向我显示了“样式”只是没有更新。 我什至从速查表中复制了代码，但仍然无法正常工作。 不知道这是版本问题还是纯粹的错误（已被查看超过1,000,000次，所以我敢肯定现在有人会捡到它）。 这是代码：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel='stylesheet' href='style.css'>
  </head>

  <body>
    <div id="sampDiv">
      <p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit. Integer feugiat in tortor at scelerisque. Aenean nulla dui, auctor sit amet dignissim et, ultrices non odio. Pellentesque luctus eu ligula id feugiat. Mauris tempus mollis est, eget elementum massa luctus eu.</p>
      <p> Sed ac ipsum libero. <b>Donec et leo</b> sit amet ante posuere pretium at eu massa. Donec tincidunt <em>elementum risus</em>, nec scelerisque massa luctus vitae. Praesent blandit tincidunt orci, <b>at commodo eros</b> interdum eu.</p>
    </div>
  <script>
    // first paragraph
    var sampDiv = document.getElementById('sampDiv');
    sampDiv.childNodes[0].style.backgroundColor = "#F0FFFF";
  </script>
  </body>
</html>

我知道有很多方法可以实现这一目标，例如：

var pElements = document.getElementsByTagName('p');
pElements[0].style.backgroundColor = "#F0FFFF";

...但是我很想知道出什么问题了。 为了澄清，这是不起作用的代码：

var sampDiv = document.getElementById('sampDiv');
sampDiv.childNodes[0].style.backgroundColor = "#F0FFFF";

我正在运行Chrome版本68.0.3440.106（正式版）（64位）

Answer 1

问题是第一个子节点是一个Text节点（在<div id="sampDiv">和<p>之前包含空格），而不是元素：

 var sampDiv = document.getElementById('sampDiv'); console.log(sampDiv.childNodes[0].nodeName);

 <div id="sampDiv"> <p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit. Integer feugiat in tortor at scelerisque. Aenean nulla dui, auctor sit amet dignissim et, ultrices non odio. Pellentesque luctus eu ligula id feugiat. Mauris tempus mollis est, eget elementum massa luctus eu.</p> <p>Sed ac ipsum libero. <b>Donec et leo</b> sit amet ante posuere pretium at eu massa. Donec tincidunt <em>elementum risus</em>, nec scelerisque massa luctus vitae. Praesent blandit tincidunt orci, <b>at commodo eros</b> interdum eu.</p> </div>

作者应该使用children ，它仅包含元素，而不是childNodes ，后者包括所有类型的节点：

 var sampDiv = document.getElementById('sampDiv'); sampDiv.children[0].style.backgroundColor = "#F0FFFF";

 <div id="sampDiv"> <p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit. Integer feugiat in tortor at scelerisque. Aenean nulla dui, auctor sit amet dignissim et, ultrices non odio. Pellentesque luctus eu ligula id feugiat. Mauris tempus mollis est, eget elementum massa luctus eu.</p> <p>Sed ac ipsum libero. <b>Donec et leo</b> sit amet ante posuere pretium at eu massa. Donec tincidunt <em>elementum risus</em>, nec scelerisque massa luctus vitae. Praesent blandit tincidunt orci, <b>at commodo eros</b> interdum eu.</p> </div>

尽管可能会争辩说firstElementChild会比children[0] 。

可能是作者没有该空格，而您将其引入了格式设置，或者作者通常通过可能已将其删除的压缩器运行了他/她的HTML等，因为如果该空格为空白，则代码可以正常工作。那里：

 var sampDiv = document.getElementById('sampDiv'); sampDiv.childNodes[0].style.backgroundColor = "#F0FFFF";

 <div id="sampDiv"><p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit. Integer feugiat in tortor at scelerisque. Aenean nulla dui, auctor sit amet dignissim et, ultrices non odio. Pellentesque luctus eu ligula id feugiat. Mauris tempus mollis est, eget elementum massa luctus eu.</p> <p>Sed ac ipsum libero. <b>Donec et leo</b> sit amet ante posuere pretium at eu massa. Donec tincidunt <em>elementum risus</em>, nec scelerisque massa luctus vitae. Praesent blandit tincidunt orci, <b>at commodo eros</b> interdum eu.</p> </div>

Answer 2

sampDiv.childNodes[1].style.backgroundColor = "#F0FFFF";

不是childNodes[0] ，而是childNodes[1] 。

Javascript教程，“ childNodes”解决方案不起作用

问题描述

2 个解决方案

解决方案1
3 已采纳 2018-09-07 07:47:33

解决方案2
-1 2018-09-07 07:51:39

Javascript教程，“ childNodes”解决方案不起作用

问题描述

2 个解决方案

解决方案1 3 已采纳 2018-09-07 07:47:33

解决方案2 -1 2018-09-07 07:51:39

解决方案1
3 已采纳 2018-09-07 07:47:33

解决方案2
-1 2018-09-07 07:51:39