Javascript has the ability to interact with the contents of a web page. This blog entry will provide some actionable depth to these
The phrase "HTML DOM" is overloaded with several meanings. Depending upon the context, "HTML DOM" can refer either to the objectified HTML or the manner in which the objects can be manipulated.
An Object Model
The object model for HTML defines the HTML elements as objects (as shown above) and for each element provides:
- properties
- methods
- events
The phrases "HTML element" and "HTML object" are used interchangeably, varying by documentation style. Because the HTML elements and the DOM tree of objects are in sync, these phrases refer to the same things.
An Application Programming Interface (API)
The phrase "HTML DOM" also refers to the application programming interface (API) for JavaScript. This API allows Javascript to:
- create, modify, and delete HTML elements
- create, modify, and delete HTML attributes
- create, modify, and delete HTML events
- create, modify, and delete CSS styles
- react to HTML events
The API contains:
- methods — actions performed on HTML elements (like creating, modifying, or deletion)
- properties — values of HTML elements that may be retrieved (get) or assigned (set) (like modifying the content of an HTML string element)
Other DOMs
The World Wide Web Consortium (W3C) specifies several DOM standards, each of which are "a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." DOMs frequently discussed include:
- Core DOM — all document types
- XML DOM — XML documents
- HTML DOM — HTML documents
When a page is loaded by the web browser, its HTML structure is held in a hierarchical tree of objects. This is the Document Object Model (DOM), within which all HTML elements have properties, methods, and events.
has an (API) that allows it to react to HTML events happening to the web page contents as well as modify the HTML elements, attributes, events, and Cascading Style Sheet (CSS) styles within the DOM.
What Does The HTML DOM Look Like?
Consider the following very minimal web page:
<html>
<head>
<title>Catchy Title</title>
</head>
<body>
<h1>Fun Header</h1>
<a href="https://example.com">A URL</a>
</body>
</html>
The DOM, a hierarchical tree of objects, is created after the web page is being loaded by the web browser. The DOM mirrors the structure of the HTML document. For the above example, the DOM looks like:
The API Is Massive
Because the The HTML DOM API covers all the HTML elements, properties, methods, and events it has a massive scope, one far outside of any one blog entry — it would perhaps take ten to twenty entries to provide merely a solid grounding around the entirety of the HTML DOM API, with more to create an exhaustive treatment.)
In contrast with most entries — which strive to provide actionable narrative and usable code snippets for each topic — here we’ll cover enough to convey how to interact with the API and how to find instructions specific to your need.
Example: Updating Text In An Element
The following example displays much of the basic plumbing needed to use the HTML DOM API. (The example is also pre-loaded here for experimentation in a dynamic online editor.)
<html>
<body>
<p id="placeTextHere"></p>
<script>
document.getElementById("placeTextHere").innerHTML =
"When bad men combine, the good must associate; " +
"else they will fall, one by one, an unpitied sacrifice " +
"in a contemptible struggle. - Edmund Burke" ;
</script>
</body>
</html>
This example, when run, will cause a text string to be inserted into the empty paragraph (which has an ID of placeTextHere). The paragraph doesn’t need to be empty; any existing content would’ve been replaced with the new text value.
The following paragraphs will identify several items of note.
A Method
The example uses getElementById, a method, to find the HTML element upon which we want to work.
A Property
The example uses innerHTML, a property, to which we assign a new attribute value. This is similar to how style properties are changed.
| Method Variants For Finding Elements |
|---|
element.attribute = aNewValue |
element.style.property = aNewStyle |
Note that one may use a method to accomplish the same thing, as in element.setAttribute(attributeName, aNewValue)
Marking Items For Interaction
While designing the example, a target paragraph was marked with an ID of placeTextHere. Finding HTML elements upon which to operate requires forethought to create concise, unambiguous code, although more flexible, computational code can be created to traverse any HTML DOM (albeit with a higher chance of identifying incorrect targets).
Updating older web pages, designed before Javascript interactivity was available or desirable, consists in large part on adding identifier tags or reformatting into otherwise easily-findable chunks. It may be easier to completely redesign older pages than to shoehorn in IDs.
Finding HTML elements can be done in a variety of ways:
| Method Variants For Finding Elements |
|---|
document.getElementById(elementId) |
document.getElementsByTagName(tagName) |
document.getElementsByClassName(className) |
document.querySelectorAll(cssSelectorName) |
Commonly-used targets for searching include anchors, body, documentElement, embeds, forms, head, images, links, scripts, and page title.
Example: Dynamic Content
Instead of specifying a static text string quotation, had we modified the innerHTML value with the Javascript Date() function the output would be the current date and time. (See also Managing Dates with Javascript Date Formats and Javascript What Time Is It? What’s Today’s Date?)
Javascript computation may be used to construct dynamic content for up-to-date web pages, be the source something language-internal (like date and time information) or external (like accessing database content or anything else available to your Javascript configuration).
The function document.write() may be used to write directly to the HTML output stream. Be warned, however, should it be used after the HTML document is loaded that content will be overwritten. (This would be a good time to take note of HTML DOM event notification, especially page-loaded.)
Conclusion
This blog post uncovered several meanings and aspects to the phrase "HTML DOM", displaying the parallel structure between the HTML and the objects of the DOM. For the API aspect, covered were several examples of HTML DOM API usage and pointers to related functions, for further exploration into the API’s capabilities.
To learn more about Javascript, check out other Javascript blog posts and enroll in our Javascript Nanodegree programs, including Intermediate Javascript.
