Wikiversity

JavaScript Programming/DOM and BOM/Example Code

< JavaScript Programming | DOM and BOM

example.html

edit 
<!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 
// 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}`);
}
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/DOM_and_BOM/Example_Code&oldid=2236055"