如何选择父元素的第一个子元素？

Question

我正在尝试使用纯 JavaScript 选择父元素的第一个子元素并更改其中的一些 CSS 属性。我试过.firstChild和.childNodes[1]方法，但他们不这样做的工作。这可以用 CSSnth-child()选择器来完成，但我想用 JavaScript 来完成，以获得更好的浏览器支持。

例子：

HTML

    <div class="daddy">
       <div class="child">I want select this child and change it's css property.</div>
       <div class="child"></div>
       <div class="child"></div>
       <div class="child"></div>
    </div>

我试过的：

JavaScript

    var x = document.getElementsByClassName('daddy');
    var d = x.firstChild; // and the x.childNodes[1]
    d.style.width="5em";

什么工作：

CSS

   daddy:nth-child(1) { width: 5em; }

任何帮助将不胜感激。

Answer 1

两个问题：

1. getElementsByClassName返回一个类似数组的对象。您需要选择列表中的第一个元素。
2. firstChild并且childNodes将返回文本节点，而不仅仅是元素。使用.children只访问内容：

var x = document.getElementsByClassName('daddy');
var d = x[0].children[0];
d.style.width="5em";

<div class="daddy">
  <div class="child">I want to select this child and change its css property.</div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>