{"id":6040,"date":"2025-06-05T01:52:04","date_gmt":"2025-06-05T06:52:04","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6040"},"modified":"2025-06-05T01:52:06","modified_gmt":"2025-06-05T06:52:06","slug":"firstchild-can-be-white-space","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/firstchild-can-be-white-space\/","title":{"rendered":"firstChild can be white space"},"content":{"rendered":"\n

This is one of those things that bit me just the other day so I figured I’d write up. It’s a fairly simple concept and maybe it’s not something you’d be confused by, but like I said, it got me!<\/p>\n\n\n\n

What is the first child of the section here?<\/p>\n\n\n

<section<\/span>><\/span>\n  <div<\/span>><\/span><\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The <div><\/code> is the first child of the <section><\/code>, right? Wrong!<\/a> Well, if we’re talking about .firstChild<\/code> in JavaScript, anyway. The actual firstChild<\/code> here is what is called a “text node” which will have a value of \"\\n \"<\/code>. It’s the white space! The return and space before the <div><\/code> hits. <\/p>\n\n\n\n
(These are just placeholder HTML elements for illustration, they could be any HTML elements.)<\/p>\n\n\n\n
If the HTML were like this:<\/p>\n\n\n
<section<\/span>><\/span><div<\/span>><\/span><\/div<\/span>><\/span><\/section<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Then<\/em> the firstChild<\/code> of the section would be the <div><\/code>.<\/p>\n\n\n\n
This same “problem” would be true if there was an HTML comment like <!-- this --><\/code> between the <section><\/code> and the <div><\/code>.<\/p>\n\n\n\n
If we wanted to ensure we were getting the first actual HTML element child, we could use a different method. We’d use .firstElementChild<\/code> instead, which will skip over text nodes and get the first actual HTML element, if there is one. (That’s what helped me.)<\/p>\n\n\n\n
I guess I found it confusing as it’s normally not the case that you select text nodes. I don’t even think of them as “selectable” generally. For instance, section :first-child<\/code> in CSS as a selector will certainly select the <div><\/code> not the white space. And if you used that selector in querySelector<\/code> it would do the same. And if you were to look at the .children<\/code> of either HTML scenario above, you’d find a single child that is the <div><\/code>. So .children[0]<\/code>, which you could be forgiven for thinking would be equal to .firstChild<\/code> are not indeed equal.<\/p>\n\n\n\n
Just a little thing you might need to know: the .firstChild<\/code> method (and .lastChild<\/code>!) will return a text node if there is white space (or, of course, other text) within an element.<\/p>\n","protected":false},"excerpt":{"rendered":"
Just a tiny gotcha. <\/p>\n","protected":false},"author":1,"featured_media":6051,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3],"class_list":["post-6040","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-javascript"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/06\/firstChild-can-be-white-space.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/6040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=6040"}],"version-history":[{"count":4,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/6040\/revisions"}],"predecessor-version":[{"id":6052,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/6040\/revisions\/6052"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/6051"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=6040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=6040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=6040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}