18 The Document Object Model (DOM)

Load helloworld.html from the Full Stack Example Pack into a browser. Open the developer tools but instead of the Console tab, go to the Elements tab. This is a representation of the browser’s DOM.

Now double-click the contents of the h1 element and change it from “Hello, World!” to “Goodbye”. You should see the change reflected on the page immediately.

Check the page source. Has it changed? Why or why not?

Now go to the Console, type document, and hit enter. Click the response to open the DOM and compare it to the view on the Elements tab. The document object gives you access to the browser’s DOM from within a JavaScript program.

Load helloworld.html from the Full Stack Example Pack into a browser if you haven’t already. Go to the console and try the following commands, noting the return values in each case.

let e = document.getElementById("message");
e;
e.innerHTML;
e.style;
e.className;

Now add an id to the img element, either by changing the source code, or by changing the DOM through the Elements view (see a previous DIY box).

Now use JavaScript statements similar to the ones above to retrieve the src and alt attributes of the image.

Load innerHTMLExample1.html from the Full Stack Example Pack into a browser. This file contains a script element that defines the changeHeading function.

Open the console and run the changeHeading function. After you press OK on the alert box, you will see the text of the heading change.

The relevant code is shown below:

<script>
    function changeHeading() {
        alert("Press OK to see me change my heading.");
        document.getElementById("heading").innerHTML = "Done";
    }
</script>

See if you can alter this code so that instead of just changing the heading, it also changes the first p element.

Load innerHTMLExample2.html from the Full Stack Example Pack into a browser. This file contains a script element that defines the changeDiv function

Open the console and run the changeDiv function. After you press OK on the alert box, you will see the div change so that it contains two new p elements. Open the developer console and go to Elements to verify that two new nodes have been added to the DOM.

<script>
    function changeDiv() {
        alert("Press OK to see me change the contents of my div.");
        document.getElementById("target").innerHTML = 
            "<p>First paragraph</p><p>Second paragraph</p>";
    }
</script>

Change the code so that it asks the user for some HTML using a prompt dialog, and then inserts whatever the user types into the div element.

Go to the McMaster University Wikipedia page, open the JavaScript console of your browser, and execute the following:

document.querySelectorAll("p");

You should get an object that contains all the p elements in the document. To get a particular one, use square brackets like this:

document.querySelectorAll("p")[2];

Or like this:

let paragraphs = document.querySelectorAll("p");
paragraphs[2];

Now execute the following code to change the text of all the paragraphs:

let paragraphs = document.querySelectorAll("p");
for (let p of paragraphs)
    p.innerHTML="JavaScript Rules!";

Did the code do what you expected? Can you figure out how to select all the Do It Yourself boxes on this page and change their innerHTML as well?