Content: Issue with "Node.previousSibling": Example refers to text nodes, not element nodes

Created on 22 Mar 2021  Â·  4Comments  Â·  Source: mdn/content

MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling

What information was incorrect, unhelpful, or incomplete?

In both console.logs in the Example, the previousSibling property actually points to a text node, not the previous image element.

Specific section or headline?

Example

Did you test this? If so, how?

I tested this by saving the example as an HTML file and examining it in Chrome DevTools.



MDN Content page report details

10 minute task WebAPI P2 good first issue help wanted

Most helpful comment

Thanks for catching this and reporting it.

So yeah, the example is plain wrong — because the img elements in the example are on separate lines, there are actually text nodes between each of them, and so previousSibling returns those text nodes rather than the element nodes.

A trivial fix here would be to change the example to put all the img elements on the same line, with no whitespace between:

<img id="b0"><img id="b1"><img id="b2">

…but that would be a pretty silly example.

So I think the right change here would be to completely replace the example with something more real-world.

So I think whoever fixes this should come up with a better example.

The example in the https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling article looks much less bad — at first glance at least — so maybe another trivial fix would be to copy that example but rewrite it slightly to work with previousSibling rather than nextSibling.

All 4 comments

Thanks for catching this and reporting it.

So yeah, the example is plain wrong — because the img elements in the example are on separate lines, there are actually text nodes between each of them, and so previousSibling returns those text nodes rather than the element nodes.

A trivial fix here would be to change the example to put all the img elements on the same line, with no whitespace between:

<img id="b0"><img id="b1"><img id="b2">

…but that would be a pretty silly example.

So I think the right change here would be to completely replace the example with something more real-world.

So I think whoever fixes this should come up with a better example.

The example in the https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling article looks much less bad — at first glance at least — so maybe another trivial fix would be to copy that example but rewrite it slightly to work with previousSibling rather than nextSibling.

Could I work on this ?

@longm89 You certainly can; assigned! Thanks for your offer of help.

@chrisdavidmills Thanks a lot.
@sideshowbarker I fixed it using your example, and I add a similar example to the one in the nextSibling that you mentioned (without the loop).

Was this page helpful?
0 / 5 - 0 ratings