Javascript:firstChild对象返回undefined

Javascript: firstChild object returns undefined

本文关键字：返回 undefined 对象 firstChild Javascript      更新时间：2023-09-26

我很好奇为什么firstChild对象在下面的代码中返回undefined？如果我省略child＝child.nextSibling

如果我在下一行调用nextSibling ，效果会很好

  divs  = $('.post')
  for(ind in divs){
   div = divs[ind];
   var child = div.firstChild;
   child = child.nextSibling; //omitting this causes undefined
   alert (child.innerHTML);
  }

html

    .....
         <div class="post">
                <h4>
                    HEADER
                </h4>
                <div class="content">
                    <p>
                        text goes here
                    </p>
                </div>
        </div>
  ......

HTML文档中<div class="post">和<h4>标记之间存在空白。访问div的firstChild属性将返回包含此空白的文本节点。文本节点没有innerHTML属性，因此会得到undefined结果。

访问文本节点的nextSibling属性将返回空白后的节点，即<h4>元素。

要直接访问作为元素的第一个子元素（跳过文本节点），可以使用firstElementChild属性而不是firstChild。

代码中的for循环也存在问题。这将遍历JQuery集合的所有属性，而不仅仅是索引。您应该使用JQuery的.each()方法。

用.each()和firstElementChild迭代div元素：

var divs = $('.post');
divs.each(function() {
  var div = this;    
  var child = div.firstElementChild;
  alert(child.innerHTML);
});

使用JQuery用:first-child选择器选择第一个子元素：

$('.post>:first-child').each(function() {
  alert(this.innerHTML);
});

因为您做错了什么：使用for(key in jQueryObject) {迭代jQuery集合。循环不仅仅遍历集合中的选定元素。它遍历所有对象属性，即divs[ind]可以是jQuery方法或属性之一，而不仅仅是DOM元素。

由于jQuery对象是一个类似数组的对象，因此它具有引用选定元素的数字属性。但对于其他属性和方法，循环将简单地失败。

假设您只有一个.post元素：

在第一次迭代中，ind为0，它指代集合中的第一个选定元素。

在第二次迭代中，ind是length。CCD_ 22返回集合的CCD_。其他jQuery属性和方法以及它的其他继承属性也是如此。

此外，由于对象属性的顺序是未定义的，您可能会在不同的浏览器上获得不同的结果。

要在jQuery集合中进行迭代，请使用.each方法。

相关文章：