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

Question

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

  <！doctype html>

  <头>
    
    
  

  <身体>
    

      
 Lorem ipsum dolor坐着，安全管教精英。在tortor中的整数feugiat在scelerisque。 Aenean nulla dui，策动者amet dignissim等人，ultrices non dioo。 Pellentesque luctus eu ligula id feugiat。莫里斯·坦普斯·莫利斯（Mauris tempus mollis est），得到马萨诸塞州的lucus eu。
      
 Sed ac ipsum libero。  Donec et leo 坐在马萨诸塞州的前保质位。 Donec tincidunt 元素风险，nec scelerisque massa luctus vitae。 Prasent blandit tincidunt orci， interdum eu。

    

  <脚本>
    // 第一段
    var sampDiv = document.getElementById（'sampDiv'）;
    sampDiv.childNodes [0] .style.backgroundColor =“＃F0FFFF”;
  
  

 

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

  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]。