Question

I am currently trying to select the childNode of an Element.
This is how I am attempting to do so:

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

I have also tried:

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

I know it is an issue with the childNodes, not the parentNodes, I have tested.

This is the simplified structure of what I am doing:

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

The reason I have to reference the 'postBody' by navigating through parent and child nodes is because this format is iterated many times.

–This brings me to my issue, the above line of code works in Google Chrome but does not work in FireFox, I have tried many variations but the console gives me the error that it is undefined.
I have checked at the element is properly being stated, it is just a difference between the way browsers handle it I presume.

If anyone has an answer, I would like it to be on how I can refer to the element that I have shown, not a lecture on how I improperly used id for multiple elements, as this is not an issue in this case (to my knowledge, since it works in Chrome).

Thanks.

Answer 1

The first method does not work in Firefox because it seems to be non standard, the second one doesn’t work because you didn’t realize that childNodes also consist text nodes. To get the element you want try

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

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