Scribd
Upload
4 views4 pages

TOPIC-3

Uploaded by

Jamaica Lintao
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
4 views4 pages

TOPIC-3

Uploaded by

Jamaica Lintao
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/ 4

TOPIC 3

HTML DOM
The HTML DOM (Document Object Model) is a programming interface for web
documents. It defines the structure of an HTML document as a tree of objects, where
each part of the document (elements, attributes, and text) is a node in that tree. The
DOM provides a way to interact with, modify, and manipulate the content, structure,
and style of a webpage using programming languages like JavaScript.

1. Selecting Elements
getElementById()

• The getElementById() method returns an element with a specified value.

• The getElementById() method returns null if the element does not exist.

• The getElementById() method is one of the most common methods in the HTML
DOM. It is used almost every time you want to read or edit an HTML element.

Note:

• Any id should be unique, but:

• If two or more elements with the same id exist, getElementById() returns the
first.
Example:
HTML:
<p id="demo">”Hello World”</p>
JS:
document.getElementById("demo").innerHTML = "Hello, John";

getElementsByClassName()
• The getElementsByClassName() method returns a collection of elements with a
specified class name(s).
• The getElementsByClassName() method returns an HTMLCollection.
Example:
HTML:
<div class="example">Element1</div>
<div class="example">Element2</div>
JS:
const collection = document.getElementsByClassName("example");
collection[0].innerHTML = "Hello World!";

getElementsByName()
• The getElementsByName() method returns a collection of elements with a
specified name.
• The getElementsByName() method returns a live NodeList.

Nodelist

• A NodeList is an array-like collection (list) of nodes.

• The nodes in the list can be accessed by index. The index starts at 0.

• The length Poperty returns the number of nodes in the list.


Example:

HTML:

<p>First Name: <input name="fname" type="text" value="Michael"></p>

<p>First Name: <input name="fname" type="text" value="Doug"></p>

<p id="demo"></p>

JS:

let elements = document.getElementsByName("fname");

document.getElementById("demo").innerHTML = elements[0].tagName;

getElementsByTagName()
• The getElementsByTagName() method returns a collection of all elements with a
specified tag name.
• The getElementsByTagName() method returns an HTMLCollection.
• The getElementsByTagName() property is read-only.
NOTE:

• getElementsByTagName("*") returns all elements in the document.


Example:
HTML:
<p>An unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p id="demo"></p>
JS:
const collection = document.getElementsByTagName("li");
document.getElementById("demo").innerHTML = collection[1].innerHTML;

Assignment:
• Create a button for each element selection. Instead of displaying automatically,
use the button to change the display.

You might also like