Scribd
Upload
0 views13 pages

Ce Between DOM and BOM

The document explains the Document Object Model (DOM) and Browser Object Model (BOM), detailing their structures, functionalities, and differences. It covers DOM tree navigation, properties, element creation, insertion methods, and event propagation, including event delegation techniques. Additionally, it discusses methods for manipulating HTML content and attributes, as well as advanced features like DocumentFragment and getComputedStyle.

Uploaded by

Faiz sheikh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views13 pages

Ce Between DOM and BOM

The document explains the Document Object Model (DOM) and Browser Object Model (BOM), detailing their structures, functionalities, and differences. It covers DOM tree navigation, properties, element creation, insertion methods, and event propagation, including event delegation techniques. Additionally, it discusses methods for manipulating HTML content and attributes, as well as advanced features like DocumentFragment and getComputedStyle.

Uploaded by

Faiz sheikh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

DOM

DOM :-
• The DOM stands for (Document Object Model)
• It represents the structure of a web page as a tree of objects (Node) that
can be manipulated with programming languages like JavaScript.
BOM :-
• The Browser Object Model (BOM) represents additional objects provided by
the browser for working with everything except the document.
• Key Features/E.g :-
• Window Object: The global object representing the browser window.
• Example: window.alert("Hello!");
• Navigator Object: Provides information about the browser.
• Example: navigator.userAgent (shows browser details).
• Screen Object: Gives information about the screen dimensions.
• Example: screen.width and screen.height.

• Location Object: Allows interaction with the URL of the browser.


• Example: location.href (gets the current URL).
• Example: location.reload() (reloads the page).
• History Object: Enables navigation through browser history.
• Example: history.back() (go back to the previous page).
• Example: history.forward() (go to the next page).

Difference between DOM and BOM


• The DOM deals with the content of the webpage,
• The BOM handles the browser and environment.
DOM Tree :-
• The DOM Tree is a hierarchical representation of a webpage's content,
structure, and elements. It looks like an upside-down tree, with the
document as the root and all elements (HTML tags, text, attributes) as its
branches.
• Structure of the DOM Tree:
• Root Node:
• The topmost node is the document object.
• Element Nodes:
• Represent HTML tags like <html>, <body>, <div>, etc.
• Text Nodes:
• Contain the text inside elements (e.g., the text inside <p> or <h1>).
• Attribute Nodes:
• Represent attributes of elements, such as id, class, href, etc.

DOM Tree Navigation :-


• The DOM allows us to do anything with elements and their contents,
but first we need to reach the corresponding DOM object.
• All operations on the DOM start with the document object. That’s the
main “entry point” to DOM. From it we can access any node.
• Here’s a picture of links that allow for travel between DOM nodes:
.

• Properties for All Nodes: -


These properties work for any type of node, such as element nodes, text
nodes, or comment nodes.
Eamples :-

• Properties for Element Nodes Only: -


These properties work only for element nodes (HTML elements like <div>, <p>,
etc.), ignoring text or comment nodes.

Examples:-

Navigating Table :-
• The <table> Element :-
The <table> element has several specific properties to interact with its
content:

• <thead>, <tfoot>, and <tbody> Elements:-


These elements have the rows property, which returns a collection of
<tr> elements contained within them.

• <tr> (Table Row) Properties:-


Rows (<tr>) have additional properties for navigating and identifying cells
within the row:

• <td> and <th> (Table Cells):-


Cells (<td> and <th>) have a useful property:

Summary of the Hierarchy :-


DOM Selector :-
• DOM navigation properties are great when elements are close to each other.
What if they are not? How to get an arbitrary element of the page?
• There are additional searching methods for that.

Where ,
• Live : All methods starts with "getElementsBy*" (Note :- Remember “s” in
Elements)return a live collection. Such collections always reflect the
current state of the document and “auto-update” when it changes.
• Static : Do not reflect changes to the DOM after the selection.

Closest :-
• The closest() method in JavaScript is used to find the nearest ancestor
(where, ancestor means: parent, the parent of parent, its parent and so ons ),
that matches a given CSS selector(including the element itself).
• Syntax :- element.closest(selector)
Where,
Element : - The starting point (the current element) from where the search for the
closest matching ancestor begins.
Selector :- A string representing a CSS selector to match the element (or ancestor)
against.
• Description :-
The closest() method starts from the element itself and traverses up the
DOM tree, looking for a matching ancestor (or the element itself) that
matches the specified selector. If no element matches the selector, it returns
null.

innerHTML :-
• innerHTML is a property of DOM elements in JavaScript that allows us to
get or set the HTML content inside an element. It includes not only the text
content but also any HTML tags within the element.
Description : -
• Get HTML Content: When used as a getter, innerHTML retrieves the
HTML markup of the element's content as a string.
• Set HTML Content: When used as a setter, innerHTML replaces the entire
content of the element with the provided string, which can include HTML.

textContent :-
• textContent is a property in JavaScript used to get or set the textual content
of a DOM element. It retrieves or modifies the text inside an element,
excluding any HTML tags, and does not parse the content as HTML.

Accessing HTML Attribut :-


• In HTML, tags may have attributes. When the browser parses the HTML to
create DOM objects for tags, it recognizes standard attributes and creates
DOM properties from them.
• So when an element has id or another standard attribute, the corresponding
property gets created. But that doesn’t happen if the attribute is non-
standard.
• Standard Atribute : -

• Please note that a standard attribute for one element can be unknown for
another one. For instance, "type" is standard for <input>
(HTMLInputElement), but not for <body> (HTMLBodyElement). Standard
attributes are described in the specification for the corresponding element
class.
• Here we can see it:

• Non-Standard Atribute:-
• If an attribute is non-standard, there won’t be a DOM-property for
it.So , All Non-Standard attributes are accessible by using the
following methods :
• elem.hasAttribute(name) : – checks for existence.
• elem.getAttribute(name) :– gets the value.
• elem.setAttribute(name, value) : – sets the value.
• elem.removeAttribute(name) :– removes the attribute.

elem.attributes:-
• The attributes property of an element (elem.attributes)
provides a collection of all the attributes of that element.
• This collection is an array-like object (not an array) that contains
“Attr “objects representing each attribute.
• E.g : -

Note :-
• Attributes – is what’s written in HTML.
• Properties – is what’s in DOM objects.

Creating an element :-
To create DOM nodes, there are two methods:
• document.createElement(tag) :-
• Creates a new element node with the given tag.
• E.g : -

• document.createTextNode(text) :-
• Creates a new text node with the given text:
• E.g : -

Insertion methods :-
• Insertion methods allow us to insert new HTML elements or text into a
webpage dynamically, at different positions relative to existing elements.
• There are multiple insertion method, which specify different places where we
can insert , that methods are :
• append
• prepend
• before
• after
• replaceWith

Methods and Their Usage


• append :-
• Adds Node(element) or String at the end of an element.
• prepend :-
• Adds Node(element) or String at the beginning of an element.
• before :-
• Inserts Node(element) or String before a specified element.
• after :-
• Inserts Node(element) or String after a specified element
• replaceWith :-
• Replaces an Node(element) with new Node(element) or String .
insertAdjacentHTML/Text/Element
• insertAdjacentHTML, insertAdjacentText, and insertAdjacentElement are
methods in the DOM API used to insert content into the DOM at specific
positions relative to an element.
• Position :
• beforebegin
• afterbegin
• beforeend
• afterend

• insertAdjacentHTML:
• This method parses the specified text as HTML or XML and inserts it
into the DOM tree at a specified position.
• Syntax :-

• E.g:-

• insertAdjacentText :-
• This method inserts text content (not parsed as HTML) at a specified
position relative to the element
• Syntax:-

• E.g :-

• insertAdjacentElement :-
• This method inserts an element node at a specified position relative to
the element.
• Syntax :-

• E.g :-
Node Removal :-
• The node.remove() method is a simple way to remove a DOM node from its
parent.
• Syntax :-

• E.g :-

When the "Remove Message" button is clicked, the message element is


removed from the DOM.

Note :-
• if we want to move an element to another place – there’s no need to remove
it from its old place.
• All insertion methods(append,prepend,...,etc) automatically remove the node
from the old place.

cloneNode():-
• The cloneNode() method is used to create a copy of a DOM node. You can
clone a node along with its descendants (deep clone) or without its
descendants (shallow clone).
• Syntax :-

• E.g:-

• Shallow Clone:-

• Deep Clone :-
• Complete E.g :-

• Point to remember :-
• Detached from Original Node: Cloned nodes do not inherit any
JavaScript event listeners or properties bound to the original node. You
need to reattach these manually.

• Attributes (like id, class, etc.) are copied to the cloned node, but
properties (like dataset or event listeners) are not.
• Use Cases:
• Duplicating elements for reuse (e.g., templating).
• Creating backup copies of nodes before modifying them.
• Implementing "Undo" functionality by storing the cloned nodes.

DocumentFragment() :-
• A DocumentFragment is a lightweight container used to hold multiple
elements before adding them to the DOM, improving performance.
• We can append other nodes to it, but when we insert it somewhere, then its
content is inserted instead.
• E.g ;-

getComputedStyle() :-
• The getComputedStyle() method is used to retrieve the computed styles of
an element as determined by the browser. This includes all CSS properties
applied to the element, whether they come from inline styles, external
stylesheets, or inherited rules.
• Syntax :-
getComputedStyle(element,[pseudoElement])
• E.g :-
• Getting a Single Computed Style:-

• Pseudo-Elements :-
We can retrieve the computed style of a pseudo-element :-

• Resolving Relative Values :-

• Iterating Over Computed Styles :-


We can list all computed styles using a for loop or Object.entries().

Event Propogation
• Event propagation is the mechanism by which an event travels through the
DOM tree when it is triggered. It describes the order in which event handlers
are called for nested elements.
• There are three main phases of event propagation:
• Capturing Phase (Event Capturing)
• Target Phase
• Bubbling Phase (Event Bubbling)

• Capturing Phase (Event Capturing) :-


• It is also known as the "trickle down" phase.
• In this phase the event starts from the root of the DOM tree and
traverses down to the target element.
• Event listeners set with { capture: true } are triggered during this
phase.
• Syntax :- To trigger element in capturing phase we have to make
{capture : true}
elem.addEventListener(‘event’,handlerFunction , {capture: true})
or
elem.addEventListener(‘event’,handlerFunction , true)
Note : - If we set “capture : true” event will triggered only in capturing phase
and not in bubbling phase. And, If we donot mention 3 rd argument to
“{capture:true} or true “ the envent triggered only in bubbling phase.
• Target Phase :-
• In this phase the event reaches the target element where it was
initially triggered
• Event listeners attached to the target element are executed (without
considering the capture flag).
• Bubbling Phase (Event Bubbling) : -
• Also known as the "trickle up" phase.
• After reaching the target, the event bubbles back up through the
DOM tree to the root.
• Event listeners set without capture: true are triggered during this
phase.

• There are some methods for Controlling Event Propagation:


• stopPropagation(): Stops the event from propagating further in
either direction (bubbling or capturing).
• stopImmediatePropagation(): Stops propagation and prevents
other listeners on the same element from executing.
• preventDefault(): Prevents the default browser action for the
event (e.g., stopping a link from navigating).

Event Delegation :-
• Event delegation is a technique in JavaScript that allows us to handle events
efficiently by taking advantage of event bubbling. Instead of adding event
listeners to multiple child elements, we attach a single event listener to their
parent and use it to manage events for all child elements.
• E.g : -

You might also like