Scribd
Upload
7 views

CSC336-WT Lec16 Slides

Uploaded by

Shan Zaib
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

CSC336-WT Lec16 Slides

Uploaded by

Shan Zaib
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Lecture # 16

CSC336 Web Technologies


Credit Hours: 3(2, 1)

Course Instructor: SAIF ULLAH IJAZ


Lecturer CS Dept, CUI Vehari
MSc University of Leicester, UK
BSc COMSATS University Islamabad

Ethics in Information Technology, Sixth Edition 1


Introduction to BOM-
DOM

• Browser Object Model (BOM) and


Document Object Model (DOM)
• BOM: Represents the browser window
and components outside the webpage
• DOM: Represents HTML elements and
allows dynamic access to document
structure
• BOM is browser-specific, while DOM is
standardized by W3C
BOM Vs DOM
• BOM focuses on browser-specific objects and interactions
• DOM provides methods to manipulate HTML and XML documents
• BOM allows control over browser actions (e.g., navigation, screen
size)
• DOM allows dynamic manipulation of content (e.g., adding/removing
elements)
BOM Object Vs DOM Object

• Window Object: Root of the BOM


• Document Object: Root of the DOM
• Window object provides access to the entire browser environment
• Document object represents the page loaded within the window
Window Object

• window is the global object in a browser


• All global variables and functions in JavaScript are properties of the
window object
js
console.log(window === this); // true
alert("This is a Window method.");
Window Object Properties:

• innerWidth: Width of window’s content area


• innerHeight: Height of window’s content area
• location: URL of the window
• navigator: Browser details
• screen: Screen dimensions
js
console.log(window.innerWidth); // Outputs window width
console.log(window.location.href); // Outputs current URL
Window Object Methods:
• alert(): Displays a message
• confirm(): Asks for user confirmation
• prompt(): Requests input from the user
• setTimeout(): Executes code after a delay
• setInterval(): Executes code repeatedly after intervals
js
setTimeout(() => alert("Hello after 2 seconds"), 2000);
Window Object Events:

• onload: Executes when a page is fully loaded


• onresize: Fires when the window is resized
• onscroll: Fires when the window is scrolled
• onerror: Executes when an error occurs
js
window.onload = () => console.log("Page is loaded");
window.onscroll = () => console.log("You scrolled!");
Location Object (Window Property):

• href: Gets or sets the URL of the current page


• reload(): Reloads the current page
• replace(): Replaces current URL without creating history entry
js
window.location.href = "https://example.com"; // Redirects to new page
window.location.reload(); // Reloads the page
History Object:

• back(): Navigates back one page


• forward(): Navigates forward one page
• go(): Loads a specific page from history stack
js
window.history.back(); // Go back one step in history
window.history.go(1); // Move forward one step
Navigator Object:

• userAgent: Browser's user-agent string


• platform: Platform or OS information
• language: Preferred language of the user
js
console.log(navigator.userAgent); // Outputs browser user-agent
console.log(navigator.platform); // Outputs user's OS
Screen Object:

• width: Screen width in pixels


• height: Screen height in pixels
• colorDepth: Number of bits used for color
js
console.log(screen.width); // Outputs screen width
console.log(screen.colorDepth); // Outputs color depth
DOM

• DOM is a structured representation of HTML documents


• HTML elements are represented as objects and nodes in a tree
• DOM allows access to and modification of document content
js
document.body.style.backgroundColor = "lightblue"; // Changes body background color
DOM

• Document Object is the root of the DOM tree


• Provides access to all HTML elements in a web page
• Methods allow dynamic manipulation of content and structure
js
console.log(document.title); // Outputs the title of the document
Document Object Properties:

• document.body: Represents the <body> element


• document.title: Title of the document
• document.URL: Full URL of the document
• document.cookie: Accesses cookies related to the document
js
console.log(document.body); // Outputs the body element
document.title = "New Title"; // Changes the document's title
Document Object Methods:
• getElementById(): Selects an element by its ID
• getElementsByTagName(): Returns elements by tag name
• querySelector(): Selects the first element matching a CSS selector
• createElement(): Creates a new HTML element
js
let element = document.getElementById("header");
element.innerText = "Welcome";
Document Object Methods (continued):

• appendChild(): Adds a new child to a node


• removeChild(): Removes a child from a node
• replaceChild(): Replaces one child node with another
js
let newDiv = document.createElement("div");
document.body.appendChild(newDiv); // Adds a new div to the body
Document Object Events:

• onclick: Fires when an element is clicked


• onkeydown: Fires when a key is pressed
• onfocus: Fires when an element gains focus
• onsubmit: Fires when a form is submitted
js
document.onclick = () => alert("Document clicked!");
DOM Node Types:

• Element: Represents an HTML tag (e.g., <div>, <p>)


• Text: Represents the text content inside elements
• Comment: Represents comments in the document
js
let textNode = document.createTextNode("Hello World");
document.body.appendChild(textNode);
Traversing the DOM:

• parentNode: Accesses the parent of a node


• childNodes: Returns a collection of a node’s children
• nextSibling: Accesses the next sibling node
• firstChild: Returns the first child of a node
js
let firstChild = document.body.firstChild;
console.log(firstChild.nodeName); // Outputs the first child node name
• Combining BOM and DOM for dynamic interactions
• BOM controls browser behavior (e.g., redirect, resize)
• DOM modifies page content dynamically (e.g., adding elements)
• Enables interactive, responsive web applications
js
document.getElementById("btn").onclick = () => window.location.reload();

Lesson Learning Outcomes (LLOs):

You might also like