Scribd
Upload
32 views

Lecture 16

The document introduces the Browser Object Model (BOM) and Document Object Model (DOM). The BOM allows JavaScript to interact with the browser using the window object and its methods, properties, and events. The DOM represents an HTML document as nodes that can be accessed and manipulated with DOM methods like getElementById() and properties like innerHTML. Key DOM events allow JavaScript to react to user interactions and other events.

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
32 views

Lecture 16

The document introduces the Browser Object Model (BOM) and Document Object Model (DOM). The BOM allows JavaScript to interact with the browser using the window object and its methods, properties, and events. The DOM represents an HTML document as nodes that can be accessed and manipulated with DOM methods like getElementById() and properties like innerHTML. Key DOM events allow JavaScript to react to user interactions and other events.

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Web Technologies

Introduction to BOM-DOM
Today’s Lecture
• Browser Object Model (BOM)
– BOM Introduction
– Methods
– Properties
– Events
• Document Object Model (DOM)
– DOM Introduction
– Methods
– Properties
– Events
Browser Object Model (BOM)
• BOM allows JavaScript to “interact with” the browser.
• Default object of browser is window.
• In JavaScript, browser is known as Window Object.
– Window Object represents a window in browser.
– Window Object is supported by all the browsers.
• An object of window is created automatically by the browser.
• window object has several properties and methods that we can use
to interact with it.
• Even document object (of HTML DOM) is a property of window
object.
Window Object Methods

Method Description
alert() Displays an alert box with a message, and OK button.
close() Closes the current window.
confirm() Displays dialog box with a message, OK and Cancel button.
open() Opens a new browser window.
prompt() Displays a dialog box that prompts the visitor for input.
stop() Stops the window from loading.
Window Object Properties

Property Description
console Returns the Console Object for the window.
document Returns the Document object for the window.
innerHeight Returns height of the window's content area (viewport).
innerWidth Returns width of a window's content area (viewport).
Window Events

Attribute Description
onerror Script to be run when an error occurs.
onload Fires after the page is finished loading.
onoffline Script to be run when the browser starts to work offline.
ononline Script to be run when the browser starts to work online.
Document Object Model (DOM)
• DOM is a platform and language independent model to represent
HTML or XML documents.
• When an HTML document is loaded into a web browser, it becomes
a document object.
• In DOM, all parts of the document (i.e., elements, attributes, and
text etc.) are organized in a hierarchical tree (as a family tree in real
life that consists of parents and children).
– In DOM terminology, these individual parts of document are
known as nodes.
– DOM is a collection of nodes:
• Element Nodes, Attribute Nodes, Text Nodes, and Comment
Nodes.
Document Object Model (DOM)
Document Object Model (DOM)
• DOM Tree
<body>
<div>
<p>Paragraph text with a <a href="foo.html">link</a> here.</p>
</div>
</body>
DOM Methods
DOM Methods are actions that we can perform (on HTML Elements).
• Finding HTML Elements by id (getElementById())
• Finding HTML Elements by class name (getElementsByClassName())
• Finding HTML Elements by tag name (getElementsByTagName())
• Finding HTML Elements by CSS selectors
– querySelector()
– querySelectorAll()
• Finding HTML Elements by HTML object collections
(document.forms)
DOM Methods
– Finding HTML Elements by id (getElementById())
• Most common way to access an HTML element is to use id of the
element.
• To find all HTML elements with id, use getElementById().
var myElement = document.getElementById("demo");
– Finding HTML Elements by class name (getElementsByClassName())
• To find all HTML elements with class name, use
getElementsByClassName().
var x = document.getElementsByClassName("demo");
– Finding HTML Elements by tag name (getElementsByTagName())
• To find all HTML elements with tag name, use
getElementsByTagName().
var x = document.getElementsByTagName("p");
DOM Methods
– Finding HTML Elements by CSS selectors (querySelector())
• To find first HTML element that matches a specified CSS selector
(id, class name, type, attribute, value of attribute, etc.), use
querySelector() method.
var x = document.querySelector("p.demo");
– Finding HTML Elements by CSS selectors (querySelectorAll())
• To find all HTML elements that match a specified CSS selector (id,
class name, type, attribute, value of attribute, etc.), use
querySelectorAll() method.
var x = document.querySelectorAll("p.demo");
– Finding HTML Elements by HTML object collections
(document.forms)
const x = document.forms["form1"];
var text = "";
for (var i = 0; i < x.length; i++) {
{ text += x.elements[i].value + "<br>"; }
document.getElementById("demo").innerHTML = text;
DOM Properties
DOM properties are values (of HTML Elements) that we can set or
change.

Property Description
innerHTML Sets or returns the content of an element.
Style Sets or returns the value of style attribute of an element.
Value Get or set the content of input controls.
DOM Events
• Event is an action that can be detected with JavaScript.
• HTML DOM allows JavaScript to react to HTML events.
– In scripts, an event is identified by an event handler.
• Reacting to Events
– A JavaScript can be executed when an event occurs.
– Example of HTML Events are when a user clicks – onclick, when
a web page loaded – onload, and when mouse over an element
– onmouseover, etc.
• HTML Event Attributes
– To assign events to HTML elements, we can use event attributes.

<body><b>click the button to see Date and Time</b>


<button onclick="displayDate()"> Check Now </button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();}
</script><p id="demo"></p></body>
DOM Events
• Assign Events using the HTML DOM
– The HTML DOM allows you to assign events to HTML elements
using JavaScript.
<body>
<b>click the button to execute the displayDate() function</b>
<button id="mybutton">Check Now</button>
<p id="demo"></p>
<script>document.getElementById("mybutton").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();}
</script>
</body>
DOM Events
• HTML DOM EventListener
– It attaches an event handler to specified element.
– Syntax: element.addEventListener(event, function, useCapture);
• event shows type of event.
• function shows a specific function that we want to call when
event occurs.
• useCapture shows a boolean value that specify whether to
use event bubbling or event capturing. (optional)
<body><b>click the button to use addEventListner() that attach a click event</b>
<button id="mybutton">Check Now</button>
<p id="demo"></p><script>
document.getElementById("mybutton").addEventListener("click", displayDate);
function displayDate() { document.getElementById("demo").innerHTML = Date();}
</script></body>
Event Bubbling vs Event Capturing
• Two ways of event propagation in HTML DOM: bubbling and
capturing.
• Event Propagation is a way of defining element order when an
event occurs.
• Example: if we have a <p> element inside a <div> element, and both
having click event attached to them. Now when the user clicks on
<p> element, which element's "click" event should be handled first?
• Bubbling
– Inner most element's event is handled first and then outer.
• Capturing
– Outer most element's event is handled first and then inner.
• Default value is false, which will use the bubbling propagation.
• When value is set to true, event uses the capturing propagation.
Events
• Mouse Events: onclick, ondblclick, onmousedown, onmousemove,
onmouseover, and onmouseup etc.
• Keyboard Events: onkeydown, onkeypress, and onkeyup etc.
• Form Events: onblur, onfocus, oninput, and onsubmit etc.
• Drag Events: ondrag, ondragstart, ondrop, and onscroll etc.
• Media Events: oncanplay, onended, and onerror etc.
Summary of Today’s Lecture
• Browser Object Model (BOM)
– BOM Introduction
– Methods
– Properties
– Events
• Document Object Model (DOM)
– DOM Introduction
– Methods
– Properties
– Events
References
• Chapter 19 and Chapter 20 from Learning Web Design- A Beginner’s
Guide to HTML, CSS, Javascript and Web Graphics By Jennifer
Niederst Robbins (4th Edition)
• https://www.w3schools.com/jsref/obj_window.asp
• https://www.w3schools.com/tags/ref_eventattributes.asp
• https://www.w3schools.com/jsref/dom_obj_document.asp
• https://www.w3schools.com/js/tryit.asp?filename=tryjs_addeventlis
tener_usecapture

You might also like