Help me understand this (JavaScript DOM)

Question

So, I use childNodes method, which is supposed to create an array of all the child elements of the div, so shouldn't [0] select the first paragraph inside the div and [1] select the second? Why does [1] select the first paragraph and [3] select the second paragraph? I don't understand.
https://code.sololearn.com/WLTe4Ql6tj7B/?ref=app

Answer 1

Try children instead of childNodes. But I don't understand that behaviour so I can't answer your direct question, sorry.

Edit: From W3Schools:
"The difference between this property and childNodes, is that childNodes contain all nodes, including text nodes and comment nodes, while children only contain element nodes."

It seems childNodes[0] takes the first <p> element, then childNodes[1] takes the text inside it, childNodes[2] then takes second <p> element and so on...

Answer 2

Russ My standard responses:

Avoid W3Schools and GeekForGeeks
[Part 1 of 2]
----
Do yourself a favor... avoid W3Schools and GeekForGeeks at all costs. Otherwise, you'll have to unlearn or relearn things later.

I remain baffled and perplexed by the influence w3schools and GeekForGeeks continue to have on beginners. I just reviewed some of the lesson content from w3schools thinking that maybe, just maybe, they've finally, after many years, improved the quality of their content.

Sadly, no. They still describe Javascript methods in such a way that creates so much confusion because they either don't really understand what they're writing about or they've watered things down so much that they've intentionally written things inaccurately.

Either way, these two websites are credited for teaching so many people, it's no wonder we're seeing so many who struggle with understanding the fundamentals.

For all things Javascript, HTML, or CSS, MDN should be your go to source. The content is consistently more accurate, credible, and better in the long run.

At the very least, never admit to learning from these websites if you're ever being interviewed by an experienced software engineer. It's likely you may not be considered worth the additional effort for retraining.

If you read articles, check the comments to determine if anyone is calling the author out for major mistakes. Those can be both entertaining as well as educational.

If comments are locked or don't exist, that's a red flag for an author who doesn't stand behind his/her content.

If there isn't an author named for the article, that's even worse.

Also, if no date exists for the article, that's a red flag it was written more for SEO keywords. They're likely more interested in ad revenue than being credible.

That's why I refuse to click on W3Schools or Geeksforgeeks websites in search results.

Answer 3

Avoid W3Schools and GeekForGeeks
[Part 2 of 2]

Russ Below are some additional links I just pulled. My opinions are NOT from other links and articles, but from my own experiences over the years. I'm sharing these to show that I'm not alone in this painful history with these horrible websites.

--------
One of Many GeekForGeeks Review that align with my experience:
----

- https://qr.ae/pN4S4K

--------
Similar links about W3Schools:
----
https://meta.stackoverflow.com/questions/280478/why-not-w3schools-com

https://www.reddit.com/r/webdev/comments/7nxdd9/why_does_so_many_people_dislike_w3schools/

https://forum.freecodecamp.org/t/why-you-should-question-w3schools/92448

https://www.impressivewebs.com/w3schools-ugly-bad-good/

Answer 4

In my campaign against using w3schools and GeekForGeeks as a reference, I'm sharing the MDN reference regarding this as well:

https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

"childNodes includes all child nodes—including non-element nodes like text and comment nodes. To get a collection of only elements, use ParentNode.children instead."

Answer 5

Karak10 Ok, but test this out; add the following to your JS tab:

window.onload = () => {var parent = document.getElementById("parent");
for (var i=0; i<parent.childNodes.length;i++){

console.log(parent.childNodes[i].nodeName);
}}

You will get this output:
#text
P
#text
P
#text

Answer 6

Russ I searched and I think it's because breakline is also considered a node, so since paragraph is a block element a break line is added first before the paragraph, and that's why the paragraph is the second node.

Answer 7

David Carroll Out if curiosity, what is your issue with w3schools?