The structure of an HTML document is normally described with tags, but it can also be specified using JavaScript commands with a Document Object Model (DOM): a language-neutral API that represents an HTML or XML document as a tree. Consider the following HTML document (Examples/example-1.html):
<html>
<body>
<h1>Simple page</h1>
<p>Simple paragraph</p>
<div>
<img src="pluto.jpg" width="100"/>
<p>Click me!</p>
</div>
</body>
</html>
This page builds a tree of interconnected nodes containing HTML elements and text. The exact same result can be obtained with the following JavaScript commands (Examples/example-2.html):
const html = document.documentElement;
const body = document.createElement("body");
html.appendChild(body);
const h1 = document.createElement("h1");
const h1Text = document.createTextNode("Simple page");
h1.appendChild(h1Text);
body.appendChild(h1);
const p = document.createElement("p");
const pText = document.createTextNode("Simple paragraph");
p.appendChild(pText);
body.appendChild(p);
const div = document.createElement("div");
const divImg = document.createElement("img");
divImg.setAttribute("src", "pluto.jpg");
divImg.setAttribute("width", "100");
div.appendChild(divImg);
const divP = document.createElement("p");
const divPText = document.createTextNode("Click me!");
divP.appendChild(divPText);
div.appendChild(divP);
body.appendChild(div);
Of course, it's much simpler to write tags, but JavaScript gives you the power to make the structure and content dynamic. Using DOM commands, you can add new elements, move them around, remove them, and change their attributes and text contents. You can also navigate the DOM tree, select or search for specific elements or data, and bind styles and event handlers to elements.
For example, if you add the following code, a new <p> containing the “New line” text will be created every time you click on the image (Examples/example-3.html):
div.style.cursor = "pointer";
div.addEventListener("click", function() {
const p = document.createElement("p");
p.innerHTML = "New line";
this.appendChild(p);
});
Normally, you wouldn't write your entire document using DOM, but only the parts you wish to control dynamically. Normally, you write the static parts as HTML and use scripting only when necessary (Examples/example-4.html):
<html>
<body>
<h1>Simple page</h1>
<p>Simple paragraph</p>
<div id="my-section">
<img src="pluto.jpg" width="100"/>
<p>Click me!</p>
</div>
</body>
<script>
const div = document.getElementById("my-section");
div.style.cursor = "pointer";
div.addEventListener("click", function() {
const p = document.createElement("p");
p.innerHTML = "New line";
this.appendChild(p);
});
</script>
</html>
For data-driven documents, you can use DOM scripting to bind data stored in arrays and objects to attributes of the elements, changing the dimensions, colors, text contents, and position. Most data visualization libraries do exactly that by providing functions that are built over the DOM, and make this task much simpler.
The following table lists the most important DOM commands:
|
Method or property |
Description |
|
createElement(tag) |
Creates an element (not connected to the node tree) and returns its reference. |
|
createTextNode(text) |
Creates a text node (not connected to the node tree) and returns its reference. |
|
appendChild(element) |
Connects the element passed as a parameter as the child of the current element. |
|
removeChild(element) |
Disconnects the child element from the current element. |
|
setAttribute(name, value) |
Sets an attribute for this element with the name and value passed as parameters. |
|
getElementById(id) |
Returns an element identified by the id passed as a parameter. |
|
getElementsByTagName(tag) |
Returns a nodelist (array) containing all the elements that match the tag name passed as a parameter. |
|
addEventListener(e, func) |
Attaches an event handler to this element. The first parameter is the event type (for example, ‘click', ‘key', and so on) and the second parameter is a handler function. |
|
documentElement |
This property references the element at the root of the document. For HTML and XHTML, it is the <html> element. |
|
children |
This property returns a node list containing the child elements of this element. |
|
innerText |
In SVG or HTML documents, this read/write property is a shortcut for creating a text node and appending it to the element. |
|
innerHTML |
In HTML documents, this read/write property is a shortcut for appending an entire HTML fragment as a child element. |
|
style |
In SVG or HTML documents, this property allows access to the element's CSS styles. You can use it to read and modify styles dynamically. |