Question:

What is DOM?

Answer:

DOM is an acronym for: Document Object Model. Basically, it refers to the hierarchy of tags, or HTML elements, as they construct an HTML document. All tags reside inside the html tag, so html is the parent. html has 2 children: head and body. The head contains tags that provide information about the web page, whereas the body contains tags that display content on the web page. Tags inside the body are children of the body. Those tags can have children and so on. The top of the hierarchy tree is the browser window itself, which contains objects not strictly part of the document, such as browser history and size of the browser window.

Question:

What is the value of that hierarchy structure?

Answer:

That structure allows JavaScript to find and interact with items on the html document.

Question:

How does JavaScript do that?

Answer:

The DOM provides several methods, including: document.getElementById and document.getElementsByTagName.

Question:

How do I use getElementById??

Answer:

If a tag has the id attribute with a value, then JavaScript can get a handle on that element. For example:

    <!-- partial html document -->
    <p id="P1">Some text.</p>

    // partial JavaScript
    var myPtag = document.getElementById("P1");

Question:

Once I have a handle on an element, what can JavaScript do with it?

Answer:

Pretty much anything you want.
You can change the text using the innerHTML property, for example:

    myPtag.innerHTML = "New text!";

You can assign a css class using the className property, for example:

    myPtag.className = "newCssClass";

You can assign an inline style, such as text color using the style property, for example:

    myPtag.style.color = "#900";

Question:

How do I use getElementsByTagName?

Answer:

You can get elements of a requested tag type from the entire document, for example:

    <!-- partial html document -->
    <ul id="exams">
        <li>100</li>
        <li>87</li>
        <li>100</li>
    </ul>
    <ul id="labs">
        <li>40</li>
        <li>40</li>
        <li>35</li>
    </ul>

    // partial JavaScript
    var myLItags = document.getElementsByTagName("LI");

Or you can limit getting only requested elements that are inside a specific tag, for example:

    var container, myLItags;
    container = document.getElementById("exams");
    myLItags = container.getElementsByTagName("LI");

Notice that even though tags are lowercase on the html document, you should use uppercase when requesting a tag name with JavaScript. Also, getElementsByTagName returns an array-like object, so you need to use array notation to access your elements with JavaScript. For example:

    myLItags[1].style.backgroundColor = "#ffc";

Question:

How can I easily access all elements I get using getElementsByTagName?

Answer:

You have to access elements 1 at a time using array [] notation, but a loop will help you easily access all elements, for example:

    for (var n = 0, len = myLItags.length; n < len; n++) {
        if (myLITags[n].innerHTML === "100") {
            myLITags[n].style.fontSize = "120%";
        }
    }

Question:

Are there other ways to access the DOM?

Answer:

Yes. Modern browsers also provide: getElementsByClassName. For example:

    <!-- partial html document -->
    <ul id="exams">
        <li class="exScores">100</li>
        <li class="exScores">87</li>
        <li class="exScores">100</li>
    </ul>
    <ul id="labs">
        <li class="labScores">40</li>
        <li class="labScores">40</li>
        <li class="labScores">35</li>
    </ul>

    // partial JavaScript
    var myLItags = document.getElementsByClassName("labScores");

Question:

What happens if the above code runs in a browser that does not support getElementsByClassName?

Answer:

Unfortunately, JavaScript will encounter an error and stop working.

Question:

What browsers do not support getElementsByClassName?

Answer:

IE < 9.

Question:

Is there a work-around?

Answer:

Yes, you can find code online, as well as included in this lecture.

Checkpoint

You should know 8.1

1. How the DOM is structured
2. How to access the DOM
3. How JavaScript can manipulate elements on a web page

Questions 8.1

1. How many methods were discussed to access the DOM?
2. What are they?
3. Do they all work in all browsers?

Exercise 8.1

1. Declare 2 variables: ulTag, and liTags
2. Use getElementById("flowers") to assign that element to ulTag
3. Use getElementsByTagName("LI") to assign all li elements inside the ul tag "flowers" to liTags
4. Loop through liTags and do 2 things to all liTags elements:
   • set the width to 5em, i.e. ...style.width = "5em";
   • set the background color to #fdf

web developer toolbox 8.1

Add a link to the JavaScript menu

• Open menu_js.html in your favorite editor
• If you don't already have a DOM category, (create a new dt tag to) add a category: DOM
• (Create a new a tag inside a new dd tag to) add a link: getELementsByTagName 2
• href should be: javascript/DOM_getELementsByTagName2.html

Add a new JavaScript page

• In the javascript folder, open aaa_template.html in your favorite editor, and save-as: DOM_getELementsByTagName2.html
• Below the comment "edit category name", change text from template to DOM
• Below the comment "edit publish and update dates", change both dates to the current date

Update the new page

• Below the comment "edit company name, page title, and page description", change:
  • Company Name to: your name
  • Template to: getElementsByTagName 2
  • ...template to: Using getElementsByTagName
• Update the comments section:
  • <dt>getElementsByTagName</dt>
  • <dd>Returns an array of requested tags</dd>
  • <dd>Use array [] notation to access each element, one at a time</dd>
• Insert html inside the wxHtmlResults div:
  • <ul id="flowers">
  • <li>Roses</li>
  • <li>Carnations</li>
  • <li>Lilies</li>
  • </ul>
  • <br />
  • <ul id="trees">
  • <li>Oak</li>
  • <li>Elm</li>
  • <li>Pine</li>
  • </ul>

Add JavaScript below the line of asterisks following the text:
** BEGIN DEVELOPER JAVASCRIPT SECTION

• Complete the instructions for Exercise 8.1

Open menu_js.html in your browser and click on your new link

Click on the Run javascript button to test your code