JavaScript — Part 2
JavaScript in the Browser:
JavaScript in the Browser
When JavaScript runs inside a web browser, it can interact with the webpage (HTML) and the user. Browsers like Chrome, Firefox, Edge, etc., have a built-in JavaScript Engine that reads and executes JavaScript code.
Example:
· Chrome → uses V8 Engine
· Firefox → uses SpiderMonkey
JavaScript Script Tag:
<script> tag:
Way 1: giving source “.js” address
Way 2: writing JS code inside the <script> tag
JavaScript Console Object:
What is the Console Object in JavaScript?
The console object is a built-in object in JavaScript that helps display messages, debug code, and check values while running your program — usually through the browser’s developer console.
You can open it by pressing: F12 → then click on the Console tab.
Common methods:
· log() → print messages
· error() → show errors
· warn() → show warnings
· table() → display data in table form
· clear() → clear console
· time() / timeEnd() → measure time
Example: to list all the available methods, we can use console.log(console)
Example: console.log()
Example: console.error()
Also, in IDE:
Example: console.assert()
Also,
Example: console.clear()
In console:
Example: Console.table()
Example: console.warn()
Also,
Example: console.info()
Also,
Example: console.time() and console.timeEnd()
Example: printing the time taken in execution of for loop
JavaScript alert, prompt & confirm:
alert() — Show a Message
Purpose: To display a simple message to the user.
Syntax:
alert(“This is an alert message!”);
How it works:
· Shows a popup with an OK button.
· Used to inform the user (no input is taken).
Example:
prompt() — Take Input from the User
Purpose: To ask the user for some input (like a name or number).
Syntax:
prompt(“Enter your name:”);
How it works:
· Shows a popup with a message, an input box, and OK/Cancel buttons.
· Returns the text entered by the user as a string.
· Returns null if the user presses Cancel.
Example:
Output:
Example: since prompt takes user input as string, we need to convert it into number.
Example: giving default value to the prompt
Output:
confirm() — Ask for Confirmation
Purpose: To ask the user a Yes/No or OK/Cancel type question.
Syntax:
confirm(“Are you sure?”);
How it works:
· Shows a popup with OK and Cancel buttons.
· Returns:
o true → if the user clicks OK
o false → if the user clicks Cancel
Example:
Output:
DOM, BOM & Window Object :
What is the Browser Environment?
When JavaScript runs in a browser, it can interact with:
1. The web page (HTML content)
2. The browser itself
3. The window that contains everything
These are handled using three main parts: DOM, BOM, and Window Object
Window Object
The window object is the top-level object in the browser. It represents the browser window or tab where the web page is displayed.
Everything (like alert(), console.log(), document, etc.) is part of the window object.
DOM (Document Object Model)
The DOM represents the HTML document as a tree structure. Each HTML element (like <p>, <div>, <h1>) becomes a JavaScript object that you can access or change.
BOM (Browser Object Model)
The BOM lets JavaScript interact with the browser (outside the webpage) — like the address bar, alert boxes, history, or screen size.
Relation Between Them
Window Object
|── Document Object (DOM)
└── Browser Object Model (BOM)
Summary
Example: You can skip writing window. because it’s the global object.
Output:
Example:
Walking the DOM:
What is the DOM?
The DOM (Document Object Model) represents the HTML page as a tree structure. Each HTML element becomes a node (object) in that tree.
What Does “Walking the DOM” Mean?
Walking the DOM means moving through or navigating between HTML elements in that tree — like finding a parent, child, or sibling node using JavaScript. It helps us access and change any part of the web page.
Basic DOM Navigation Properties
Here are the main ways to “walk” or move through the DOM:
Accessing Children of an Element:
What Does “Children of an Element” Mean?
In HTML, elements are arranged in a tree structure. When one element is inside another, it becomes that element’s child.
Example:
<div id=”parent”>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
Here:
· <div> is the parent
· Two <p> tags are its children
Accessing Children in JavaScript
To work with children, we first select the parent element, then use its child properties.
To understand this, let’s first create a basic page, index.html:
Output:
Now, accessing it:
Also,
Also,
Parents & Siblings of an Element:
What Are Parent and Sibling Elements?
In an HTML page, elements are arranged in a tree structure (DOM tree). So, each element can have:
· A parent → the element it is inside
· siblings → elements that share the same parent
Example:
<div id=”parent”>
<h2>Heading</h2>
<p id=”para1">Paragraph 1</p>
<p id=”para2">Paragraph 2</p>
</div>
Here:
· The <div> is the parent of <h2>, <p>, and <p>.
· <p id=”para1"> and <p id=”para2"> are siblings.
To understand this, we will use the simple example:
Output:
Now, accessing via the console: Accessing the Parent Element
Also, Accessing Sibling Elements:
Also,
Also,
Summary
In short:
Get Aditya Kumar’s stories in your inbox
Join Medium for free to get updates from this writer.
· Use parentElement → to go upward
· Use nextElementSibling → to go right
· Use previousElementSibling → to go left
Element only Navigation:
What is Element-only Navigation?
In the DOM (Document Object Model), every part of an HTML page — including tags, text, and comments — is treated as a node. But sometimes, we only want to navigate between element nodes (like <div>, <p>, <h1>) and ignore text nodes (like spaces or line breaks).
This is called Element-only Navigation.
Example HTML
<div id=”container”>
<h2>Heading</h2>
<p>Paragraph</p>
</div>
Here, inside <div> there are:
· Two element nodes → <h2>, <p>
· Plus some text nodes (spaces and line breaks)
If you use general node navigation (firstChild, nextSibling), those text nodes will also be counted — which can cause confusion.
Why Use Element-only Navigation?
To skip text and comment nodes and only deal with real HTML elements. That’s why we use the Element-only properties.
Element-only Navigation Properties
Difference Between “Node” and “Element”
To understand this, we shall start from the basics:
Output:
Console:
Also,
Also,
Also,
Also,
Table Navigation:
What is Table Navigation?
Table navigation means accessing and moving through parts of an HTML table using JavaScript. The browser treats table elements (<table>, <thead>, <tbody>, <tr>, <td>, etc.) as nested DOM elements, so you can easily navigate between them.
Why Use Table Navigation?
We use it to:
· Read or modify table data
· Highlight or style specific rows/cells
· Access elements like thead, tbody, tr, td directly
Table Navigation Properties
Now, to explain this let’s understand this:
Output:
Now, on console:
Searching the DOM:
What is “Searching the DOM”?
In JavaScript, searching the DOM means finding elements inside an HTML page using selectors or element properties. The DOM (Document Object Model) represents your web page as a tree of elements, and JavaScript can search through it to access or modify those elements.
Why We Search the DOM
We use DOM searching to:
· Get access to specific HTML elements
· Change text, style, or attributes
· Add interactivity (buttons, inputs, etc.)
Common DOM Searching Methods
Difference Between Methods
To understand this, take a very basic example:
Index.html:
Output:
Now, applying the DOM searching and changing the properties: .getElementById
Now, using the .getElementsByClassName:
Also, using the .getElementsByTagName:
Also, using the .querySelector
Also, using .querySelectorAll:
Matches(), Closest() and Contains():
What Are matches(), closest(), and contains()?
These three are DOM element methods used to check relationships between elements or find related elements in the document.
They help you:
· Check if an element fits a selector (matches)
· Find the nearest matching ancestor (closest)
· Check if one element is inside another (contains)
Now, to understand this, we will create a simple file:
Output:
Now, using the matches():
Now, if doesn’t matches:
Now, to understand the closest(), let’s create another file: index2.html
Output:
Now,
Now, to understand the contains(), we will create another file: index3.html
Output:
Now,
Matches(), Closest() and Contains():
What Are innerHTML, outerHTML, and Other Properties?
These properties are used to get or change HTML content of an element.
1. innerHTML
· It gives the HTML content inside an element.
· You can read it or change it.
2. outerHTML
· It gives the entire element itself, including its own tags.
· Changing it replaces the element.
3. textContent
· It gives only the text inside the element (no HTML tags).
· Use it when you just want to handle text safely.
4. innerText
· Similar to textContent, but respects visible text only (ignores hidden ones and CSS styles).
Example: innerHTML
Output: at start
Output: when button was clicked
Example: outerHTML
Output: when loaded
Output: when button was clicked
Example: textContent
Output: when loaded
Output: when button was clicked
Example: innerText
Output: when loaded
Output: when button was clicked
HTML Attributes and their methods:
HTML Attributes — Basics
An HTML attribute is extra information added to an HTML tag.
Example:
<p id=”message” class=”info” title=”tooltip”>Hello</p>
Attributes here:
· id=”message”
· class=”info”
· title=”tooltip”
JavaScript Methods to Work With Attributes
Summary:
· getAttribute() → read
· setAttribute() → write
· hasAttribute() → check
· removeAttribute() → delete
· attributes → list all
Example: getAttribute()
Output:
Example: setAttribute()
Output: at start
Output: after button is clicked
Example: has Attribute()
Output:
Example: removeAttribute()
Output:
Example: attributes
Output:
Contact Me:
📧 Email: adii.utsav@gmail.com
🔗 LinkedIn: https://www.linkedin.com/in/aditya-kumar-3241b6286/
💻 GitHub: https://github.com/Rememberful
