Question

我试图编写一个javascript函数来测试一个元素是否是第一个孩子...

这是我的代码：

$el = document.getElementsByClassName("b")[0];
$firstEl = $el.parentNode.getElementsByClassName("a").firstChild;

http://jsfiddle.net/bf2ae5tt/

为什么它不起作用？

Answer 1

只需使用$firstEl = $el.parentNode.getElementsByClassName("a")[0]代替firstChild

Answer 2

如果我理解你，你想先查看 a，看看它是第一个 b的第一个孩子，那么你需要另一个[0]：

$el = document.getElementsByClassName("b")[0];
$firstEl = $el.parentNode.getElementsByClassName("a")[0].firstChild;
// Here ---------------------------------------------^^^
if ($el === $firstEl) {
    // ....
}

但我会改用querySelector，它有更好的支持（基本上，它在IE8中，而getElementsByClassName不是）并且它返回它找到的第一个元素而不是找到它们并返回一个列表：

$el = document.querySelector(".b");
$firstEl = $el.parentNode.querySelector(".a").firstChild;
if ($el === $firstEl) {
    // ....
}

Answer 3

你可以这样做

   $el = document.getElementsByClassName("b")[0];

   if($el.parentNode.children.length > 0){
       $firstEl = $el.parentNode.children[0];
   }

   console.log($el == $firstEl);

使用firstChild

  $el = document.getElementsByClassName("b")[0];

   $firstEl = $el.parentNode.firstChild;

   console.log($el == $firstEl);

如果您的dom是

，

将会起作用

   <div class="p"><div class="a b"></div><div class="a"></div></div>

不是你的dom

  <div class="p">
     <div class="a b"></div>
     <div class="a"></div>
  </div>

因为标记之间的任何空格都会导致插入#text节点

node.firstChild

如何测试给定元素是否是第一个子元素

3 个答案: