Window Object
The window object represents an open window in a
browser.
It is browser’s object (not JavaScript’s)
Automatically created by the browser
It is a global object with lots of properties and methods
DOM (Document Object Model)
The DOM (Document Object Model) is a tree-like structure
created by the browser that represents the webpage. It
allows JavaScript to access and change the content,
structure, and style of the page — without reloading.
DOM Manipulation
Selecting with id
[Link](“myId”);
Selecting with class
[Link](“myClass”);
Selecting with tag
[Link](“tagName”);
DOM Manipulation
Query Selector
[Link](“myId/ myClass/ tag”) //return first
element
[Link](“myId/ myClass/ tag”) // return a
node list
Properties
innerText: returns the text content of the element and all
its children
innerHTML: return the plain text or HTML contents in the
element
textContent: returns textual content even for hidden
elements
tagName: returns tag for element nodes
Access Parent Elements
parentNode: Gets the parent node (can be any node
type)
[Link]
parentElement: Gets the parent only if it’s an element
[Link]
Accessing Children
childNodes: Returns all child nodes (elements + text +
comments)
[Link]
children: Returns only child elements (ignore text/
comments)
[Link]
firstChild: First node inside the element (even a text node)
[Link]
Accessing child element
firstElementChild: First element inside the element
[Link]
lastChild: Last node (including text)
[Link]
lastElementChild: Last element
[Link]
Sibling Navigation
nextSibling: Next node
[Link]
nextElementSibling: Next element
[Link]
previousSibling: Previous node
[Link]
previousElementSibling: Previous element
[Link]
Element Manipulation
Creating an element: creating a new element
[Link]()
Append child: Adding a new element
[Link](childNode);
Append: Can take multiple nodes or even strings
[Link](child, child);
Prepend: Insert node as the first child of the parent
[Link](childNode);
Element Manipulation
InsertBefore: Inserts a node before a specific existing child
[Link](newNode, existingChild);
Replacechild: Replaces an existing child with a new one.
[Link](newChild, oldChild);
Removechild: Removes a specified child from a parent.
[Link](child);
Element Manipulation
after() and before(): Insert relative to an element, not inside a
parent.
[Link](newNode);
[Link](newNode);
remove(): Removes the element itself from the DOM
[Link]();
replaceWith(): Replaces the current element with another node or
string.
[Link](newNode);
CSS Manipulation
. style:- [Link] = "value";
.[Link]:- [Link] = "color: red;
font-weight: bold; background-color: lightgray;";
Adding Id
[Link] = "newId";
Use ClassList for styling
[Link](“className");
[Link](“className");
Set Attribute
[Link](attributeName, value);
[Link]("div").setAttribute("id",
"mainBox");
[Link]("p").setAttribute("class",”newcl
ass” );
[Link](“attributeName”);
const hrefValue = [Link]("href");
onClick
➢"onclick is an event handler.
➢This tells the browser: 'When this element
is clicked, run this code.'