DOM (Document Object Model)

A hierarchical tree organizing web page components. Each component relies under the top-level window object.

A child object of the DOM presenting the user's monitor resolution in pixels.

Total screen width in pixels.

Total screen height in pixels.

Available screen width, excluding UI like taskbars.

The available screen height, excluding system UI elements.

Bit value indicating the color range.

Displays a simple alert box with a message and an "OK" button.

Displays a confirmation box with "OK" and "Cancel" buttons.

Displays a prompt box with a text input field.

A child of the window object, providing access to the HTML document.

Retrieves or sets the document's title.

Provides the full URL of the current document.

Retrieves the domain name of the document.

The number of forms in the document.

The number of images in the document.

The number of links in the document.

The number of scripts in the document.

Accesses the first image element in the document.

Retrieves a single element by its id.

Retrieves all elements with the given tag name.

Retrieves all elements with a specific class name.

Allows setting or retrieving an element's HTML content, supports both text and HTML elements.

Returns only the content between the opening and closing tags of an element, ignores HTML tags.

Writes content directly into the HTML document body, replacing all existing content. Not recommened for modern web dev.

Method to create an HTML element dynamically by using createElement(tagName).

Appends a new element inside an existing parent element, placing it at the end of the parent's content.

Dynamically adds or modifies attributes of an HTML element.

Functions executed when a particular event happens.

Fired when the page has loaded into the browser.

Two main ways to handle events: HTML Event Attributes (Inline) and JavaScript (addEventListener).

Triggered when the user interacts with the mouse over an element.

Triggers when the user clicks an element (press + release).

A Javascript event that is Fired when the user double-clicks.

Fired when the pointer enters an element.

Fired when the pointer leaves an element.

Contains information about the event that occurred, such as type, location, pressed key, and triggering element.

Allow users to select multiple options independently.

Selecting only one option from a group; all buttons share the same name attribute.

Checkboxes and radio buttons are grouped by using the same name attribute.

Boolean property indicating whether a checkbox or radio button is selected (true) or not (false).

Returns or sets the index of the selected option in a dropdown list (starts at 0).

Returns or sets the value of the selected option in a dropdown list.

Returns a collection of all elements inside a element.

Signup and view all the flashcards

length

Returns the number of options in the dropdown list.

Signup and view all the flashcards

multiple

Boolean indicating multiple options in a dropdown can be selected or not.

Signup and view all the flashcards

Study Notes

Meet DOM

• The browser organizes web page components into a hierarchical tree, this is known as the Document Object Model (DOM)

• Each component is nested under the top-level window object

• With the HTML DOM, JavaScript can:

  • Access all HTML elements
  • Change all HTML elements

• The DOM enables dynamic webpage changes without reloading

• DOM helps JavaScript interact with HTML and CSS

• It's essential for making interactive web applications

Inspect Properties

• The top-level DOM window object has a screen child object
• The screen object has properties describing the user's monitor resolution
• Resolutions are in pixels

Screen Dimensions and Usable Space

• Total screen size is accessed via:
  • Window.screen.width: Total screen width
  • Window.screen.height: Total screen height
• Usable screen space is found using:
  • Window.screen.availWidth: Available width
  • Window.screen.availHeight: Available height
• These properties optimize layout design, ensuring content fits within the user's available screen area

Color Depth Information

• Window.screen.colorDepth is the bit value indicating color range
• The common values are:
  • 8-bit: 256 colors (Low Color)
  • 16-bit: 65,536 colors (High Color)
  • 24-bit: Millions of colors (True Color)
  • 32-bit: Billions of colors (Deep Color)

Show Dialogs

• The top-level DOM window object uses three methods to display dialog messages to the user:
  • Displaying a simple alert box with a message and an "OK" button using window.alert(message)
  • Displaying a confirmation box with "OK" and "Cancel" buttons, window.confirm(message)
    • Returns true for "OK" and false for "Cancel"
  • Displaying a prompt box with a text input field window.prompt(message, defaultValue)
  • An "OK" button returns the user input value
  • A "Cancel" button returns null

Extract Info

• The document object is a child of the window object
• Document object provides access to and manipulation of the HTML document
• It's used widely in JavaScript for dynamic page interactions
• It also offers access to:
  • Page title (document.title)
  • Current URL (document.URL)
  • Domain name (document.domain)
  • Last modified date (document.lastModified)
  • Referrer URL (document.referrer)
• Changing the document title:
  • document.title = "New title"
• The document object is useful for dynamically updating web pages

Address Arrays

• The document object has child objects like forms, images, links, styleSheets, and scripts
• Each object that is represented as an array corresponds to elements in the HTML document
• The number of objects in the document:
  • Forms: document.forms.length;
  • images: document.images.length;
  • links: document.links.length;
  • scripts: document.scripts.length;

Address Array

• The first image in the document body specified by an HTML tag:
  • document.images[0];
• Its URL can be referenced using:
  • document.images[0].src;
• Assigning a new URL dynamically replaces the old image:
  • document.images[0].src = 'new URL';

Address Elements

• Modern methods provides three efficient ways to access elements:
  • Accessing element by ID
  • Accessing element by tag name
  • Accessing element by class name
• Error prone method, accessing elements in component arrays via index
• Modern Methods with JavaScript:
  • Accessing element by ID
    • Retrieves a single element by its id:
      • document.getElementById("intro").style.color = "blue";
    • Best for unique elements like headers, buttons, or sections

Accessing Element by Tag Name

• Tag name is the method for retrieving "all" elements with the given tag name
• It returns an HTMLCollection as an array-like structure
  • Example: document.getElementsByTagName("p")[0].style.fontSize = "18px";
• This is used for changing properties for multiple elements of the same type

Accessing Element by Class Name

• Class name is the method for retrieving "all" elements with a specific class
• It returns an HTMLCollection Example
  • document.getElementsByClassName("highlight")[0].style.backgroundColor ="yellow";
• Used for applying styles or modifications to multiple elements at once

Write Content

• The DOM uses three methods to write content:
  • Insert or Change HTML Content (innerHTML)
  • Insert or Change Text (No HTML)
  • Writing Content Directly to the Page (document.write)

Insert or Change HTML Content (innerHTML)

• HTML content allows setting or retrieving an element's HTML content
• It supports text and HTML elements

document.getElementById("output").innerHTML = "<b>Welcome to JavaScript!</b>";

• Output = Welcome to JavaScript!

Insert or Change Text (No HTML)

• The innerText property of an element returns "only the content" between its opening and closing tags
• It sets or retrieves "only text content", ignoring HTML tags and treating them as plain text

document.getElementById("output").innerText = "<b>Welcome to JavaScript!</b>";

• Output = Welcome to JavaScript! (renders as plain text).

Writing Content Directly to the Page (document.write)

• Content is written directly into the document body
• Using this method replaces all existing HTML content if executed after page load
• document.write is not recommended for modern web development
• It's mainly used for testing or when loading a new page dynamically

document.write(<b>Welcome to JavaScript!</b>");

Creating an HTML Element Dynamically

• createElement(tagName) creates an HTML element dynamically
• It takes the tag name as an argument
• Content is added using either: .innerHTML or .innerText

let newHeading = document.createElement("h2");
newHeading.innerText = "Hello, JavaScript!";

Adding the New Element to the Page

• The new element appends inside an existing parent
• It is placed at the end of the parent's content

let container = document.getElementById("content");
let newParagraph= document.createElement("p");
newParagraph.innerText = "Hello, JavaScript!"
container.appendChild(newParagraph);

Adding Attributes to Elements

• JavaScript adds or modifies HTML element attributes for flexibility in manipulating the DOM
• Setting a new attribute for an element requires two arguments:
  • The attribute name
  • The attribute value

let image = document.createElement("img");
image.setAttribute("src","image.jpg");
image.setAttribute("alt", "Dynamic Image");
document.body.appendChild(newParagraph);

Events

• The DOM allows JavaScript to react to "events" providing functions that execute when an event happens
• Known as "event-handlers", functions can react to events such as:
  • load – browser loads page
  • click - mouse button clicks
  • keydown - a key is pressed
  • change – input field edits
  • submit – user submits HTML form

Event Process

• To work with events in JavaScript, consider:
  • The Event: What happens that you want to respond to
    • Load
    • Click
    • Mousemove
    • Keydown, ketup
    • Submit
  • The Reaction: The function you define to react to
    • Change style (e.g., button red)
    • Add/remove text/content
    • Send data to server
    • Show/hide an element

Handling Events

• Two main ways to handle events:
  • HTML Event Attributes (Inline Method)
  • JavaScript (addEventListener Method)

HTML Event Attributes (Inline Method)

• Directly add the event in the HTML element using an attribute:
  • onclick
  • onmouseover
• Example:

<button onclick="myFunction()">Click Me!</button>

function myFunction() {
  alert ("Hello World!");
}

JavaScript (addEventListener Method)

• Registers a function to be executed when a specific event occurs on a specific element
• This is the recommended way to handle events
• Example:

element.addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}

Load Events

• The load event is fired when the entire page has completely loaded
• In other words, the browser waits for everything to finish loading before triggering the event.
• To respond to the load event, there are two main ways:
  • Using the window.onload Property
  • Using the add event listener

Mouse Events

• Mouse events are triggered when the user interacts with the mouse over an element on the page.
• Common Mouse Events are:
  • "Click" is triggered by clicking elements using the mouse
  • "Dblclick" is triggered by double clicking elements
  • "Mouseover" is triggered by the mouse entering inside the element
  • "Mouseout" is triggered by mouse leaving the element

Event Values

• The event object contains event information, such as:
  • What type of event it was (e.g. click, keydown)
  • Where it happened (mouse coordinates)
  • Which key was pressed
  • Which element triggered the event

element.addEventListener("click", myFunction(event));
function myFunction(event) {
    alert ("Event type:", event.type)
}

Checkboxes and Radio Buttons

• Checkboxes allow users to select multiple options independently
• Radio Buttons allow users to select only one option from a group
• All buttons in a radio button group share the same name attribute

Grouping Behavior and JS Access

• By name, both checkboxes and radio buttons are grouped
• In JavaScript, access the group with:

let toppings = document.getElementsByName("Top");
let sizes = document.getElementsByName("Size");

• Result is an array-like object, enabling:
  • Looping
  • Accessing elements using an index
  • Reading/assigning the .checked property

Using .checked to Control Selection

• The .checked Property is a Boolean property on both checkboxes and radio buttons
  • "true" indicates selected, "false" indicates not selected

for (let i = 0; i < toppings.length; i++) { if (toppings[i].checked) { console.log(toppings[i].value); } }

### Select Options
- The `<select>` element creates an options dropdown list
- Javascript can interact with a `<select>` element using properties:
    - `selectedIndex` - Index of the selected option (starts at 0)
    - `value` - Value of the selected option
    - `options` - Collection of all `<option>` elements inside `<select>`
    - `length` - Number of options in the dropdown
    - `multiple` - Boolean that indicates whether multiple options can be selected

### Summary
- The document object consists of `title`, `URL`, `domain`, `lastModified`, and `referrer` properties which describe the document
- The document object consists of `forms`, `images`, `links`, `styleSheets`, and `scripts` child objects which are arrays of document components
- The document object consists of `getElementById()`, `getElementsByTagName()`, and `getElementsByClassName()` methods to reference HTML elements
- The `innerHTML` and `innerText` properties that are part of the document object can be used to write content into existing elements
- The document object consists of `createElement()`, `appendChild()`, and `setAttribute()` methods that can add content to a document
- The DOM handles javascript reactions to user actions for events such as `load`, `click`, `keydown`, `change`, and `submit`
- Event-handler functions can be assigned to an object property or specified by the `addEventListener()` method
- Event objects can be passed to an event-handler function, the event determined by the `event.type` property
- Radio and checkbox button objects consist of checked boolean properties set to true when the button is selected.
- Selection list objects consist of a selectedIndex property that contains the index number of currently selected options array element

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Get started for free

Related Documents

More Like This

10 questions

DOM Manipulation in Web Development

BalancedNumber

16 questions

DOM Manipulation in Web Development

BeautifulCouplet

20 questions

HTML DOM and JavaScript

PreciousPortland5873

20 questions

JavaScript et le DOM

NobleDarmstadtium5875

Quick Share

Copy the link below or share directly to socials.

Anyone: Anyone can view and access this lesson.

Copy link Copied!