FAQ: Javascript and the DOM - Traversing the DOM

Frequently Asked Questions JavaScript FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Traversing the DOM” exercise from the lesson “Javascript and the DOM”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Traversing the DOM

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

I can’t seem to find or notice any effect on the DOM, when i tweak the both the .Firstchild and parentNood.

3

Please post your code.

node.firstChild
node.parentNode
4

I had the same problem (my code is below). It took a few resets before the changes were rendered and it worked perfectly. I find that a lot of the problems in this section are much less responsive to our input compared to other lessons. Is there a reason for this?

let first = document.body.firstChild;
first.innerHTML = “I am the child!”
first.parentNode.innerHTML = ‘I am the parent and my inner HTML has been replaced!’

1 Like
5

This one is broken.
When you put the correct answer:
let first = document.body.firstChild();
first.innerHTML = “I am the child!”;

first.parentNode.innerHTML = “I am the parent and my inner HTML has been replaced!”;

The grading is messed up. It give the error: “Did you tweak the contents inside ?”
and will only accept:

let first = document.body.firstChild;
first.innerHTML = “First child”;
first.parentNode.innerHTML = “I am the parent and my inner HTML has been replaced!”;

Which is wrong the string “First child” is not mentioned in the instructions and comes from outer space.

3 Likes
6 
.firstChild

is not a method, but a property.

7

It is not an answer for the question and don’t now if this is the right place to ask.
I noticed something. If you start the <h1></h1> element (fist child of the body) in a new line, code won’t work.
What is the reason for that?
Is that because even space is counted as a child?

8

HTML should not be affected by line breaks, or absence of them.

<body>
  <h1>The First Child</h1>
</body>
9

image
FC5C49A1-BF1D-4657-8A05-07CC6DA14BFA.jpeg1776×1606 918 KB

This one it doesn’t work.

10

Please post your script content.

11

Blockquote let first = document.querySelector(‘body’).firstChild

Blockquote first.innerHTML = ‘this is first child’

This is my JS.
After I run, I get the result in the picture in previous reply.
(It does not update the innerHTML property of the firstChild)

12

body is actually a global variable that we can reference directly without having to query its selector.

let first = document.body.firstChild

Give that a try and see what happens.

1 Like
13

I have the same result. If I start the first child (h1 element) in new line, it is not updated.
It is like it does not recognize it as a child.
But instead if I use

let first = document.body.children[0]
first.innerHTML = ‘first child’

It works fine regardless of where the first child is located
(Either in a new line)

14 
let first = document.body.firstChild;
first.innerHTML = "First child";
//first.parentNode.innerHTML = "I am the parent and my inner HTML has been replaced!";

firrstChild
firrstChild.PNG416×593 20 KB 

let first = document.body.firstChild;
first.innerHTML = "First child";
first.parentNode.innerHTML = "I am the parent and my inner HTML has been replaced!";

parent_innerHTML
parent_innerHTML.PNG420×593 6.33 KB

15

Yet another misleading one, ‘FIRST CHILD’??? I would be very interested to find out how often does codecademy revisit their content to check for accuracy. As I keep going through the examples sometimes I get more and more discouraged, for one I’m trying to grasp the concept but it doesn’t help when they throw curve balls like this with the inaccuracy in their solutions.

1 Like
16

Screen Shot 2020-05-10 at 5.49.04 pm
Screen Shot 2020-05-10 at 5.49.04 pm1910×1256 278 KB

why i cant go to the next exercise?

17 
first.innerHTML    = 'i am the child!'
Did you set ... to = 'I am the child!'
1 Like
18

Oops, so is only typing errors :sweat_smile: thanks for the reply

19

Just a quick heads up. The following will mark the first question as a green check, as if you did somethiung correctly, but will NOT change the text on the webpage.

let first = document.body.firstChild;

document.first.innerHTML = ‘I am the child!’;

21

Hello and thank you for the help in advance. While solving exercise I try to figure out different solution, and I would like to ask why the first piece of code is correct and indeed changes the first body’s element, while the does not:

  1. "let first = document.body.firstChild;

first.innerHTML = ‘I am the child!’; "

  1. let first = body.firstChild;

document.first.innerHTML = ‘I am the child!’;

Why is it compulsory to save the root node into the variable and NOT add it to the js’s command? Thank you again!