An HTML document is not in itself dynamic. We make it dynamic by applying programmed action to it by means of JavaScript. This is obviously if the document is available in some variable form to JavaScript. Browsers render HTML5 documents on your browser screen and in addition create an object containing the whole of the document. This object is put to your disposal as an object called document. Graphically an HTML5 document looks as follows.
Looking into an individual phrasing element, colloquially just know as an element, it looks as follows.
Accessing an HTML5 document by means of JavaScript is facilitated by a few essential DOM methods. The DOM is an object with several predefined methods for our convenience. At this point let's just name the most common ones:
getElementByIdgetElementsByTagNamegetElementsByClassNamegetAttributesetAttributeNormally you create elements by typing HTML5 into a document, naming the document something.html and displaying it with your browser. Less frequently you may actually create, change, or delete new elements on the fly with JavaScript so that your document actually changes while it is being displayed in the browser. We will get to that later. For now let us look at an example using the above 5 methods.
Let me start by creating a simple HTML5 document. I will use your textbook's example from [Kei10a] as a starter. Later we may play a little with it.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Shopping List</title>
<link href="adactio30.css" rel="stylesheet"/>
</head>
<body>
<h1>What to buy?</h1>
<p title="a gentle reminder">
Don't forget to buy this stuff.
</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
</body>
</html>
In order to test getElementById we change the
previous HTML5 a bit into the following example. Please notice
that the activation of the JavaScript is done differently than in
the textbook.
The generic syntax of the statement is:
element.getElementById(id)
The element could be any object
element given by the DOM, or provided by your
code. id is the wanted id from some
element of the HTML5 document.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Shopping List</title>
<link href="adactio30.css" rel="stylesheet"/>
<script src='nQuery.js'></script>
<script>
'use strict';
var b1 = function() {
console.log("b1: " + typeof $('purchases'));
}
var b2 = function(x) {
console.log("b2: " + typeof $(x));
}
</script>
</head>
<body>
<h1>What to buy?</h1>
<p title="a gentle reminder">
Don't forget to buy this stuff.
</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<footer>
<button onclick="b1();">Button1</button>
<button onclick="b2('purchases');">Button2</button>
</footer>
</body>
</html>
View in browser. When viewing press Ctrl-Shift-I and click the buttons.
The method getElementById is by far the most
commonly used DOM method. I will show you another example
to try to indoctrinate some best practice
into you, dear reader. Best practice includes separating
JavaScript code into separate files for reasons parallel to the
ones making us separating CSS into separate files.
'use strict';
/*
* adactio32.js
*/
var $ = function (nml) {
return document.getElementById(nml);
}
var b3 = function (x) {
console.log("b3: " + typeof $(x));
}
<!doctype html>
<html>
<!-- adactio32.html -->
<head>
<meta charset="utf-8"/>
<title>Shopping List</title>
<link href="adactio30.css" rel="stylesheet"/>
<script src="adactio32.js"></script>
</head>
<body>
<h1 id="headline">What to buy?</h1>
<p title="a gentle reminder">
Don't forget to buy this stuff.
</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<footer>
<button onclick="b3('headline');">Button1</button>
<button onclick="b3('purchases');">Button2</button>
</footer>
</body>
</html>
View in browser. When viewing press Ctrl-Shift-I and click the buttons.
The generic syntax of the statement is:
element.getElementsByTagName(tag)
The element could be any object
element given by the DOM, or provided by your code.
tag is the element name of the wanted
elements.
'use strict';
/*
* adactio35.js
*/
var showResults = function (z) {
var arr = document.getElementsByTagName(z);
console.log("Array has " + arr.length + " " + z + "-elements.");
console.log("The types of the elements are:");
for (var i = 0; i < arr.length; i++) {
console.log(typeof arr[i]);
}
}
<!doctype html>
<html language="en">
<!-- adactio35.html -->
<head>
<meta charset="utf-8"/>
<title>Shopping List</title>
<link href="adactio30.css" rel="stylesheet"/>
<script src="adactio35.js"></script>
</head>
<body>
<h1>What to buy?</h1>
<p title="a gentle reminder">
Don't forget to buy this stuff.
</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<footer>
<button onclick="showResults('li');">Button 1</button>
</footer>
</body>
</html>
View in browser. When viewing press Ctrl-Shift-I and click the buttons.
The generic syntax of the statement is:
element.getElementsByClassName(class)
The element could be any object
element given by the DOM, or provided by your code.
class is the class name of the wanted
classes as referenced from HTML5 code.
'use strict';
/*
* adactio37.js
*/
var showResults = function (z) {
var arr = document.getElementsByClassName(z);
console.log("Array has " + arr.length + " " + z + "-class occurences.");
console.log("The types of the elements are:");
for (var i = 0; i < arr.length; i++) {
console.log(typeof arr[i]);
}
}
<!doctype html>
<html language="en">
<!-- adactio37.html -->
<head>
<meta charset="utf-8"/>
<title>Shopping List</title>
<link href="adactio30.css" rel="stylesheet"/>
<script src="adactio37.js"></script>
</head>
<body>
<h1>What to buy?</h1>
<p title="a gentle reminder">
Don't forget to buy this stuff.
</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<footer>
<button onclick="showResults('sale');">Button 1</button>
</footer>
</body>
</html>
View in browser. When viewing press Ctrl-Shift-I and click the buttons.
With getAttribute, and setAttribute you respectively query and set attributes on elements. The element reference may be obtained by applying getElementById, or any of the other methods just described.
The generic syntax of these statements is:
element.getAttribute(attribute);
element.setAttribute(attribute, value);
The element could be any object
element given by the DOM, or provided by your code.
attribute is the desired attribute name
you want to query or set. The value, obviously is the
value you want to assign to the relevant
attribute.
'use strict';
/*
* adactio39.js
*/
var setGetH1Att = function () {
var elms = document.getElementsByTagName('h1');
console.log("Id and Title Before: ");
console.log("id: " + elms[0].getAttribute('id'));
console.log("title: " + elms[0].getAttribute('title'));
elms[0].setAttribute('id', 'myh1');
elms[0].setAttribute('title', 'This is the document headline');
console.log("Id and Title After: ");
console.log("id: " + elms[0].getAttribute('id'));
console.log("title: " + elms[0].getAttribute('title'));
}
var setGetPAtt = function () {
var elm = document.getElementById('myh1');
elm.setAttribute('style', 'color: magenta');
}
<!doctype html>
<html language="en">
<!-- adactio39.html -->
<head>
<meta charset="utf-8"/>
<title>Shopping List</title>
<link href="adactio30.css" rel="stylesheet"/>
<script src="adactio39.js"></script>
</head>
<body>
<h1>What to buy?</h1>
<p title="a gentle reminder">
Don't forget to buy this stuff.
</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<footer>
<button onclick="setGetH1Att();">Button 1</button>
<button onclick="setGetPAtt();">Button 2</button>
</footer>
</body>
</html>
View in browser. When viewing press Ctrl-Shift-I and click the buttons.