Examples

Step 1: In the code editor below, go to the "HTML" tab and add the code below:

Next, go to the "JS" tab and do the example exercises below:

Step 2:

Example 1: Finding HTML Element by Id
Write JavaScript code to access the paragraph with the "intro" id attribute, and change its text color to blue.
You have to use the: "getElementById( )" method.
This what the code will look like:

Now, write the code above in the code editor, in the "JS" tab.

The outcome should be like this:

Step 3:

Example 2: Finding HTML Elements by Class Name
Next, write JavaScript code to access the paragraph with the "demo" class attribute,
And change its content text to "Another paragraph".
You have to use the: "getElementsByClassName( )" method.

Note: When you use the getElementsByClassName( ) method you have to specify which one you mean since there may be many tags with the same class name. So that's why you add brackets [ ] with the index number.

Now, write the code above in the code editor, in the "JS" tab.

The outcome should be like this:

Step 4:

Note: When you use the getElementsTagName( ) method you have to specify which tag you want since there may be many of the same tag type (like many <h2> tags in the same HTML file).
So that's why you add brackets [ ] with the index number.
For example: getElementsByTagName("h2")[0]

Now, write the code above in the code editor, in the "JS" tab.

The outcome should be like this:

Lesson 2: JS and HTML DOM