Question

我目前正在尝试选择元素的childNode。这就是我试图这样做的方式：

var postBody_elem = elem.parentNode.parentNode.childNodes['post'].childNodes['postBody'];

我也尝试过：

elem.parentNode.parentNode.childNodes[0].childNodes[1];

我知道这是childNodes的问题，而不是parentNodes，我测试过。

这是我正在做的简化结构：

<section id = 'postWrapper'>                          //This is the Second Parent.
  <article id = 'post'>                               //This should be the First Child.
    <section id = 'postInfo'>
      <section id = 'postTitle'></section>
      <section id = 'poster'></section>
      <section id = 'postDate'></section>
    </section>
    <section id = 'postBody'>                       //This should be the Second Child.
    </section>
  </article>
  <section id = 'postBar'>                          //This is the First Parent.
    <img id = 'portrait'>
    <section id = 'editButton'>Edit</section>       //This is the var elem.
    <section id = 'deleteButton'>Delete</section>
  </section>
</section>

我必须通过导航父节点和子节点来引用'postBody'的原因是因为这种格式被多次迭代。

- 这让我想到了我的问题，上面的代码行在Google Chrome中运行但在FireFox中不起作用，我尝试了很多变种，但是控制台给了我一个未定义的错误。我已经检查了元素是否正确陈述，这只是浏览器处理它的方式之间的区别我猜想。

如果有人有答案，我希望如何能够参考我所展示的元素，而不是关于我如何不正确地使用id多个元素的演讲，因为这不是在这种情况下的问题（据我所知，因为它适用于Chrome）。

感谢。

Answer 1

第一种方法在Firefox中不起作用，因为它似乎是非标准的，第二种方法不起作用，因为您没有意识到childNodes也包含文本节点。要获得您想要的元素，请尝试

elem.parentNode.parentNode.childNodes['1'].childNodes['3']

http://jsfiddle.net/mowglisanu/UqZVn/

Answer 2

后人的一些替代方案（这些在Firefox工作，我不知道其他浏览器的支持）：

elem.children排除文字节点，因此elem.parentNode.parentNode.children[0].children[1]可以使用
您可以使用elem.parentNode.parentNode.getElementsByTagName('section')[4]（0 = postInfo，1 = postTitle，2 = poster，3 = postDate）
您可以使用elem.parentNode.parentNode.querySelector('article > section + section')作为实例
我认为elem.parentNode.previousElementSibling.lastElementChild也有效

JS - 从FireFox中选择childNodes的问题

2 个答案: