DOM and Inspect Properties

Meet DOM

• The browser organizes web page components into a hierarchical tree.
• This tree is the Document Object Model (DOM).
• Each component is nested under the top-level window object.
• The HTML DOM allows JavaScript to access and change HTML document elements.
• The DOM enables dynamic webpage changes without reloading.
• It assists JavaScript interaction with HTML and CSS and it is essential for creating interactive web applications.
• Using the object model, JavaScript can change HTML elements and their attributes and CSS styles, remove/add HTML elements and attributes and also react to all existing HTML events.

Inspect Properties

• The top-level DOM window object has a screen child object that provides properties describing monitor resolution in pixels.
• Overall screen size can be accessed via Window.screen.width (total width in pixels) and Window.screen.height (total height in pixels).
• Usable space (excluding system UI) is accessed through Window.screen.availWidth (available width) and Window.screen.availHeight (available height).
• These properties optimize layout design, ensuring content fits within the user's screen area.
• Window.screen.colorDepth shows bit value indicating color range; common values include 8-bit (256 colors), 16-bit (65,536 colors), 24-bit (millions of colors), and 32-bit (billions of colors).

Show Dialogs

• The top-level DOM window object provides three methods which JavaScript can use to display dialog messages to the user.
• A simple warning message is displayed through a simple alert box with a message, using window.alert(message).
• A "OK" and "Cancel" confirmation box is displayed using, window.confirm(message).
• This returns true when the OK button is clicked or false if they click the Cancel button.
• A prompt box with a text input field is shown using a "OK" button return input value and a "Cancel" button.returns nullwindow.prompt(message, defaultValue).

Extract Info

• The document object is child of the window object, providing access to and manipulation of the HTML document
• It is used widely in JavaScript for dynamic page interactions.
• The document object provides access to the page title (document.title), current URL (document.URL), domain name (document.domain), last modified date (document.lastModified), and referrer URL (document.referrer).
• It retrieves/sets document title with document.title; console.log(document.title) displays it, and document.title = "New title" changes it.
• Retrieves the domain name of the document with document.domain.

Address Arrays

• The document object has child objects forms, images, links, styleSheets, and scripts.
• Each object is represented as an array corresponding to elements in the HTML document.
• The number of each object in the document can be returned with document.forms.length (forms), document.images.length (images), document.links.length (links), and document.scripts.length (scripts).
• The first image in document body is represented by document.images[0].
• The URL of the image is referenced as document.images[0].src.
• Assigning a component a new URL in a script dynamically replaces the old image using document.images[0].src = 'new URL'.

Address Elements

• Accessing elements by index in component arrays known as the old approach is error-prone, tedious, and hard to maintain.
• JavaScript provides three efficient methods to access elements: by ID, tag name, and class name.
• Accessing element by ID Retrieves a single element by its ID withdocument.getElementById("intro").style.color = "blue".
• Modification of a specific element can be done dynamically using element by ID..
• Accessing element by tag name Retrieves all elements with a given tag name and which returns an HTMLCollection which is an array-like structure.
• Changing properties for multiple elements of the same type by accessing element by tag name.
• Accessing element by class name retrieves elements with a specific class.
• Applying styles or modifications to multiple elements at once needs access to elements by class name elements.

Write Content

• To write content in the DOM there are three methods: Inserting/changing HTML content (innerHTML), inserting/changing text (No HTML), and writing content directly to the page.
• Inserting/changing HTML content (innerHTML) allows setting/retrieving HTML content, supporting text and HTML elements. document.getElementById("output").innerHTML = "<b>Welcome to JavaScript!</b>".
• With inserting/changing text (No HTML), only the content between the opening and closing tags are displayed, retrieves only text content, and ignores HTML tags. `document.getElementById("output").innerText = "Welcome to JavaScript!".
• Writing content directly to the page, writes directly into document body, replaces all existing HTML content after page load, and is used mainly for testing or loading pages dynamically, although not recommended for modern web development. `document.write(Welcome to JavaScript!".
• Use createElement(tagName) to create an HTML element where tag name is an argument.
• Dynamic content can be added using .innerHTML or .innerText
• A new element is appended inside an existing parent and is placed at the end of the parent's content.
• JavaScript allows dynamic modification of HTML element attributes for increased flexibility within the DOM; set new attributes for an element using attribute name and attribute value.

Events

• The DOM allows JavaScript to react to "events" that occur on a page.
• These functions are known as "event-handlers" and can react to the page load, mouse clicks, key presses, input field modifications, and form submissions.
• Javascript events need two main components events and reaction, which defines function to react to event.
• The reaction can change the style, add/remove text/content from the page, send data to server, or show/hide an element.
• JavaScript has two methods of using/handling events: HTML Event Attributes (Inline Method) and JavaScript addEventListener Method.
• HTML event attributes directly add the event to the HTML element using attributes such as onclick and onmouseover.
• The JavaScript addEventListener method registers a function, addEventListener("click", myFunction);.
• It's the recommended method, especially in modern development.

Load Events

• Load event is fired when an entire page has completely loaded, enabling the browser to wait for everything to finish loading events.
• Load event handler is defined using window.onload property or add event listener property.

Mouse Events

• Mouse events are triggered when a user interacts with the mouse over an element on the page.
• The mouse event include click (press and release), double click, when the pointer enters or even leaves an element.
• Element events contain information about what type of event it was, where it happened. which key was pressed, and which element triggered the event.
• An event object is passed to an event-handler, and the event can be identified by its event.type property.

Check Boxes

• Checkboxes allow users to select multiple options, with each checkbox being independent.
• Radio buttons allow selecting one option, with buttons in the same group sharing a name attribute.
• Checkboxes and radio buttons can be grouped by sharing the same name attribute.
• JavaScript accesses these groups with document.getElementsByName().
• The result is an array-like object, allowing looping, element access by index, and checked property.
• The .checked Property is a Boolean and it is true when selected, or false when not selected.

Select Options

• The <select> element in HTML creates a drop-down list, allowing user to select one option from many.
• Interacting properties: index, value, all elements, and whether multiple options are selected

Summary

• The document object includes title, URL, domain, lastModified, and referrer properties and has forms, images, links, styleSheets, and scripts child objects.
• The document object has getElementById(), getElementsByTagName(), and getElementsByClassName() methods used to reference HTML elements; and innerHTML and innerText properties used to write content into existing elements.
• The DOM allows Javascript to react to events.
• A selection list object has a selectedIndex property, which contains the index number of the currently selected options[ ] array element.