When a browser renders a webpage from an HTML document, the browser creats a DOM (Document Object Model). This DOM can be use by JavaScript to add and/or manipulate elements in the document.
For example, the following HTML:
<!doctype html>
<html>
<head>
<title>The JavaScript DOM</title>
</head>
<body>
<h1>The JavaScript DOM</h1>
<p>Mauris convallis dictum odio. Quisque euismod finibus.</p>
<a href="https://codeadam.ca">codeadam.ca</a>
</body>
</html>Would have the following DOM:
The easiest method of referencing an element in the DOM is by giving the elements IDs:
<!doctype html>
<html>
<head>
<title>The JavaScript DOM</title>
</head>
<body>
<h1 id="heading">The JavaScript DOM</h1>
<p id="paragraph">Mauris convallis dictum odio. Quisque euismod finibus.</p>
<a id="link" href="https://codeadam.ca">codeadam.ca</a>
</body>
</html>To reference the heading we would use the document.getElementById('heading'). We can then use a DOM element to change the properties of the element. For example, to change the heading to red we would use the following JavaScript:
document.getElementById('heading').style.color = "red";To change the href value of the link we would use the following JavaScript:
document.getElementById('link').href = "https://codeadam.ca/learning/javascript-dom.html";Create a new HTML document, add a heading, some images, and some paragraphs. Use Lipsum for some quick paragraph content. Add some JavaScript to the HTML document that will complete the following objectives:
- Change the text colour of the
h1element. - Change the text of the first
pelement. - Change the border colour of one of the
imgelements. - Change the background colour of the
bodyelement.
Full tutorial URL:
https://codeadam.ca/learning/javascript-dom.html
