Question 1

why does JavaScript in html not seem to care about semicolons? it works fine whether i put a semicolon at the end of a line or not.

Accepted Answer

It's a feature called "Automatic Semicolon Insertion" (or ASI). Javascript interpreters will add semi-colons for you.

Question 2

is there a difference in between using `window.document` or `document`? both work, same for `alert` and `window.alert`

Accepted Answer

Absolutely nothing. `window` is the default object when using Javascript to manipulate HTML, meaning, if you don't specify another object, that's what JS will assume you're meaning.

Question 3

In the solar system challenge I made this code:
var divEl = document.createElement("div");
        divEl.className = "planet";
        divEl.style.backgroundColor = "orange";
        document.body.appendChild(divEl);
        
        var divEl1 = document.createElement("div");
        divEl1.className = "moon";
        divEl1.style.backgroundColor = "white";
        document.body.appendChild(divEl1);

and Warning is this:
"Hm, are you appending the new div to the planet div you created in step 1? The moon div should be a child of the planet div in the DOM."

I dont get what exactly have to do. To make child under the child or...? Moon appear but warning is there too! Can someone help me, please!

Accepted Answer

you can try to append the child by using "divEl" instead of "document.body"

Question 4

When I need to rename things with dashes in CSS, when do I need to use camel code versus when is it ok to leave the dashes in?

Accepted Answer

CSS properties are *always* defined with hyphens between words. Because you cannot have a hyphen in a JavaScript property name, you must use camelCase to access the corresponding `style` property in JavaScript.

These CSS properties:
```#element {
    *background-color*: #f00;
    *font-size*: 20px;
}```
Correspond to these JavaScript style properties:
```var element = document.getElementById("element");
console.log(element.style.*backgroundColor*);
console.log(element.style.*fontSize*);```

Question 5

I'm confused about the content/structure of the DOM tree. If I want to add an element to it, I have to know where I am going to add it but I have no idea what the DOM tree looks like and how to reference a specific node. Is there a way to view or print it out so I can see what nodes exist?

Accepted Answer

The DOM has the body as the trunk of the tree, with all visual elements stemming from it. Those elements are like the branches. Elements inside of those are like smaller branches or leaves.
For example: The body is the trunk. A `ul` is a branch. And each `li` inside the `ul` is a leaf. Each `li` is a child of the `ul` and the `ul` is a child of the body.

Question 6

I'm still ultimately confused why for non interactive elements we are even using DOM for this. Shouldn't we stick to using HTML and the appropriate CSS? It's cleaner and shouldn't it run faster than having to also run the javascript unless it's something interactive where we have to use DOM?

Accepted Answer

The reason you are learning to edit HTML with JavaScript is because you won't use it for silly purposes. This is just a simple way to teach it since you already know HTML. An example of using JavaScript would be to create a clock.

The clock isn't interactive; I can't click it and have something special happen, it just has moving hands that match your computer's time. There isn't a hard rule that describes every case in which you'd need JavaScript. You will simply know when and how to use it.

So yes, you could have just done it in HTML and CSS, but you might want to make something interactive or something that requires math. You can even make games with JavaScript!

Good luck and happy coding!

Question 7

Hello guys, I have a problem with the last challenge. Here is my code: `` When I try to run it, it says that JavaScript has encountered a run-time error, and in the console is says "undefined is not an object". Can someone please explain what is the problem?

Accepted Answer

I think the first line should be
`var divEl = document.createElement("div");`

Question 8

What's the difference between using...
var imgEl = document.createElement("img");
and
var imgEl = document.body.createElement("img");?

Accepted Answer

The second one doesn't work. `document.body.createElement` doesn't exist.

Question 9

In the solar system challenge where it says to add a background to the div, should it be added in JS part? When adding to the CSS part, it works fine but keeps saying "Make sure you set the background color of the div so that the planet actually shows up.", and when I try to add it in the JS part ( like,
var divEl = document.createElement("div");
divEl.className = ("planet"); 
divEl.style.backgroundColor = "green"; ) it does not work.
Thank you.

Accepted Answer

`divEl.className=("planet")` is wrong - Remove the brackets surrounding "planet".

Also did you use appendChild anywhere in your code? If not then your div will not be visible.

Just some advice - Best thing to do if you're having trouble with the exercises is to open up another window from prior lessons that we learnt from and use it as a reference. Then do it a second time without help so you know you actually learnt it. Just keep repeating the exercises until you can do them without help.

Course: Computer programming - JavaScript and the web > Unit 6

Summary: DOM modification techniques

Modifying an existing element

Modifying attributes

Modifying styles

Modifying class names

Modifying inner HTML / text

Creating elements from scratch

Want to join the conversation?