Scribd
Upload
28 views21 pages

CSC336-WT Lec16 Slides

Uploaded by

Shan Zaib
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views21 pages

CSC336-WT Lec16 Slides

Uploaded by

Shan Zaib
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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