DOM stands for "Document Object Model". Whenever you browse to an HTML page in a web browser, the browser loads the HTML page and immeduately converts it into a DOM. All of your HTML tags are converted into "objects" (more commonly known as "elements") during this process. All the elements are stored in a "Document" object. When you put all this togther, you have the "Document Object Model".
Note: DOM is really the name for the design or "schema" for the data structure used in a browser. However, "The DOM" has become the name of the stuff in the browser so that's what we are giong to use.
All the paragraphs, divs, buttons, tables, lists, and other HTML elements are now available to you in the DOM. This is also why we need to learn JavaScript because it is the only language that can access The DOM. You can even modify the style and position of elements using JavaScript and The DOM.
Don't worry too much about what an "object" is. For our purposes, it's just the data that controls an HTML element. When The DOM is created, the elements (objects) are created from your HTML code. In other words, if you have a link (anchor tag) in your HTML code, then the DOM will have an object to hold the "href", text for the link, and anything else you specified in the attributes of the link. The same is true for all other elements. When you create a paragraph of text, the text ends up in an object within The DOM.
Here's and example with a simple HTML page:
<html>
<body>
<h1>The Header</h1>
<p>Some text</p>
<a href="http://www.humboldt.edu">HSU</a>
</body>
</html>
This HTML will be converted into something like the following:
This is a bit of a simplification but it will work for our purposes.
The figure below shows the full hierarchy of objects within a browser (from www.tutorialspoint.com).
Notice that everything you might think of that is on a web page is in the DOM. There are also some additional items:
There are other elements in the DOM but this is enough for now!
Effectively everything in a web page is an Element. Elements can have "Properties" and "Methods". You've already worked with some element properties when you changed the style and position of your DIV tags in a previous lab. Properties include:
Some properties, such as innerHTML, are read-only, others are write-only such as "id". We'll learn how to change a vareity of these properties in the weeks ahead.
Elements also include "Methods". Methods are functions that are executed when an "event" happens. As an example, when you click on a button in a web page, the button's "onclick()" function is called. You can replace these methods with JavaScript to make them do whatever you desire. Try this example from W3Schools and change the text that is displayed in the example.
Methods you might want to change in your web pages for veraious elements include:
Note: HTML attributes in the content of the start tag are converted to properties and methods in DOM elements when the HTML is processed. Also, don't confuse these "attributes" with attribues in a GIS data set.
List of properties and methods available in all HTML elements.
The easiest way to access elements in The DOM is to give them a unique "id" and then use "getElementByID()" to access them. You give an element and "id" by adding it as an attribute to the HTML tag. Then, you can use "getElementByID()" by set a variable to "point" to the elements object. Once you have the variable set, you can modify the contents of the element and the browser (typcially) responds immeidately so show you the result.
Click on the link below and then open the "Developer Tools". Set a break point on the line that includes the getElementById() function and refresh the browser. Now step through the code to see what happens.
Typically, we need to edit an HTML file that contains JavaScript and then save it to our server and then refresh the web page to see changes.
© Copyright 2018 HSU - All rights reserved.