JavaScript and significance of DOM

JavaScript

JavaScript is a lightweight, interpreted, object-based scripting language, created by Brendan Eich at Netscape (1995) and standardised as ECMAScript. It runs in the browser (and on servers through Node.js) and is used to add behaviour to web pages.

Main features: client-side execution, event-driven, dynamically typed, supports functions, objects and arrays, works with HTML and CSS, and is supported by all browsers. Uses: form validation, dynamic content, animation, AJAX, interactive UI and games.

<script>
  document.write("Hello, World!");
</script>

Significance of the DOM

The Document Object Model represents a web page as a tree of objects that scripts can access. It is the bridge between JavaScript and the page.

• Dynamic content: JavaScript can add, remove or change elements and text without reloading the page.
• Style changes: Colours, size and visibility can be changed at run time (element.style.display = "none").
• Event handling: User actions (click, key press, submit) are linked to code through DOM events.
• Form validation and access: Values of form fields are read through document.forms[...] or getElementById(...).value.
• Navigation of structure: Parent, child and sibling nodes can be traversed.
• Platform and language independence: A W3C standard that works the same way in all major browsers; also used with XML.
• Basis of modern libraries: jQuery, React and others work by manipulating the DOM.

Example:

document.getElementById("msg").innerHTML = "Welcome";

Without the DOM, JavaScript could not interact with the page and web pages would remain static.