JavaScript IV: Document Object Model and Browser Object Model

Document Object Model (DOM)

• The DOM is a structure that represents the HTML tags, attributes, and order of a web page
• It allows JavaScript to communicate with and change a web page
• The DOM is made up of nodes, which are the individual HTML tags and text elements
• Nodes can be traversed and manipulated using JavaScript methods

DOM Tree

• The DOM tree is a hierarchical representation of the DOM
• It consists of parent and child nodes, sibling nodes, and text nodes
• The DOM tree can be traversed and manipulated using JavaScript methods

Selecting Elements/Nodes

• document.getElementById("id") selects an element with a specific ID
• document.querySelector("selector") selects an element with a specific CSS selector
• document.getElementsByTagName("tag") selects a group of elements with a specific tag name
• document.getElementsByClassName("class") selects a group of elements with a specific class name

Dynamically Changing Text Content

• element.innerText = "new text" changes the text content of an element
• element.innerHTML = "new html" changes the HTML content of an element

Dynamically Changing Attributes

• element.setAttribute("attribute", "value") sets an attribute of an element
• element.getAttribute("attribute") gets the value of an attribute of an element

Dynamically Changing Style

• element.style.property = "value" changes the style of an element
• Properties that consist of more than one word are joined with a capital letter (e.g. fontSize)

Dynamically Adding New Elements

• document.createElement("tag") creates a new element
• element.appendChild(node) adds a new element to the DOM
• element.innerHTML += "new html" adds new HTML content to an element

Events

• Events are actions that users perform, such as clicking a button or moving the mouse
• Events can be handled using inline handlers or event listeners
• Event listeners can be added to elements using addEventListener method

Handling Events

• Inline handlers are added as an attribute to an HTML element
• Event listeners are added using the addEventListener method
• Multiple event listeners can be added to an element

JavaScript Timing Events

• setTimeout(function, delay) runs a function after a specified delay
• setInterval(function, delay) runs a function at a specified interval
• clearTimeout and clearInterval can be used to stop the execution of a function

Browser Object Model (BOM)

• The BOM provides objects that allow JavaScript to interact with the browser
• Objects include window, document, navigator, screen, history, and location
• The BOM is not standardized across all browsers

BOM Objects

• window object represents the browser window
• document object represents the HTML document
• navigator object provides information about the browser and its capabilities
• screen object provides information about the screen and its dimensions
• history object provides information about the browser's history
• location object provides information about the current URL and allows navigation

Browser Compatibility Issues

• Different browsers and versions may have different support for certain features and standards
• Using common standard tags and features can help with compatibility issues

Document Object Model (DOM)

• The DOM is a structure that represents the organization of a web page, including its HTML tags, attributes, and order.
• It allows JavaScript to communicate with and modify a web page.
• Each element and text in a web page is a node in the DOM.

DOM Tree

• A DOM tree is a visual representation of the DOM, showing the relationships between nodes.
• Nodes can have parent, child, and sibling relationships.
• Examples of DOM trees include:
  • A basic HTML page structure
  • A unordered list with list items
  • A table with headings and rows

Selecting Elements/Nodes

• You can select a single element/node using:
  • document.getElementById("id") or document.querySelector("#id")
• You can select a group of elements/nodes using:
  • document.getElementsByTagName("tag") or document.querySelectorAll(".class")
• Note that querySelector only returns the first matched element, while querySelectorAll returns all matched elements.

Creating and Modifying Elements/Nodes

• You can create a new element/node using document.createElement("tag").
• You can add content to an element/node using node.innerText = "content" or node.appendChild(textnode).
• You can append a new element/node to an existing element/node using parent.appendChild(node).
• You can remove a node by finding its parent and using parent.removeChild(node).

Create TextNode vs Setting InnerText

• Creating a text node using document.createTextNode("content") and then appending it to an element/node is more precise.
• Setting innerText directly using node.innerText = "content" is more convenient if the node only has text content.

This quiz covers the Document Object Model (DOM) and Browser Object Model, including their usage, structure, and role in web page development and web applications.