Question

我正在尝试使用纯JavaScript选择父元素的第一个子元素并更改其中一些CSS属性。我尝试了.firstChild和.childNodes[1]方法，但它们不起作用。这可以使用CSS nth-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

两个问题：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

或者，如果您有多个爸爸元素，那么

var x = document.getElementsByClassName('daddy');

[].forEach.call(x, function(d) {
    d.children[0].style.width = '5em';
});

Answer 3

为了更好的浏览器支持，因为您要求使用{strong>纯CSS 使用:first-child选择器，因为它是跨浏览器并且 CSS 2.1 ，请参阅此链接here以及下表，其中说明了浏览器支持：

table first-child

所以这是一个 CSS ONLY ：

的片段

＆＃13;

.child:first-child {
  /*whatever CSS you want here --
  just fot visualization and snippet :*/
  background-color: red;
  color: white;
}

＆＃13;

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

＆＃13;

Answer 4

getElementsByClassName返回一个nodeList，它没有firstChild或childNodes属性，您应该获取该集合的元素，然后使用这些属性，即{{1 }}。

x[index]

请注意，只有较新的浏览器（包括IE9 ）才支持var x = document.getElementsByClassName('daddy'), i = 0, j; for (; i < x.length; i++) { e = x[i].childNodes; for (j = 0; j < e.length; j++) { if (e[j].nodeType === 1) { e[j].style.width = '5em'; break; } } }方法。如果要支持旧版浏览器，则应该使用shim方法或使用其他功能。这个question的答案提供了几种解决方案。

作为替代方案，您还可以使用getElementsByClassName方法：

querySelectorAll

Answer 5

IMO你应该使用这个：.daddy > .child

标准X Y和X > Y之间的区别在于后者只会选择直接子女。

请参阅：

http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

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

5 个答案: