1. Scripting the DOM MIS 3502, Fall 2016 Jeremy Shafer Department of MIS
Fox School of Business
Temple University
10/18/2016

2. Adding to the mix…

3. Goals:
Understand these properties of the Node interface for the DOM: nodeValue, parentNode, childNodes, firstChild, lastChild, and nextElementSibling.
Understand these methods of the Document and Element interfaces for the DOM: getElementsByTagName, getElementsByName, and getElementsByClassName.

4. To start with…

5. The DOM

8. The node needed a value for this to work!

10. How’s all that different from using innerHTML?
element.innerHTML is supported by all browsers back to The value assigned to innerHTML can be text content or HTML source code.
nodeValue is for setting the text content of a node only.
nodeValue allows for relative navigation within the DOM.

11. Multiple interfaces…

12. HTML DOM getElementsByTagName() Method
The getElementsByTagName() method returns a collection of all elements
in the document with the specified tag name, as a NodeList object.
The nodes can be accessed by index numbers. The index starts at 0.
You can use the length property of the NodeList object to determine the number of elements with the specified tag name, then you can loop through all elements and extract the information you want.
Example:
var x = document.getElementsByTagName(”h2");

13. HTML DOM getElementsByClassName() Method
The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object.
Example:
var x = document.getElementsByClassName("example");

14. HTML DOM getElementsByName() Method
The getElementsByName() method returns a collection of all elements in the document with the specified name (the value of the name attribute), as a NodeList object.
Example:
var x = document.getElementsByName("fname");

15. It’s time for an experiment!