JavaScript Programming/DOM and BOM/Example Code
Appearance
example.html
[edit | edit source]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache">
<title>Example</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<p>View the Console for JavaScript output.</p>
<script defer src="example.js"></script>
</head>
<body>
<noscript>Enable JavaScript to see web page content.</noscript>
</body>
</html>
example.js
[edit | edit source]// This program displays DOM and BOM properties.
//
// References:
// https://en.wikibooks.org/wiki/JavaScript
"use strict";
window.addEventListener("load", function () {
displayElements("*");
console.log("");
displayChildNodes(document, 0)
console.log("");
displayWindow();
console.log("");
displayScreen();
console.log("")
displayNavigator();
console.log("");
displayLocation();
});
function displayElements(tag) {
let elements = document.getElementsByTagName(tag);
for (let i = 0; i < elements.length; i++) {
let element = elements[i];
console.log(element.tagName);
}
}
function displayChildNodes(node, level) {
console.log(`${" ".repeat(level * 4)}${node.nodeName}`)
for(let i = 0; i < node.childNodes.length; i++) {
displayChildNodes(node.childNodes[i], level + 1);
}
}
function displayWindow() {
console.log(`window.innerWidth: ${window.innerWidth}`);
console.log(`window.innerHeight: ${window.innerHeight}`);
}
function displayScreen() {
console.log(`screen.width: ${screen.width}`);
console.log(`screen.height: ${screen.height}`);
}
function displayNavigator() {
console.log(`navigator.platform: ${navigator.platform}`);
console.log(`navigator.userAgent: ${navigator.userAgent}`);
}
function displayLocation() {
console.log(`location.hostname: ${location.hostname}`);
console.log(`location.href: ${location.href}`);
}