Client side Java script Server side Java script Data types variables Operators Expressions Functions Objects Array Date and math related objects Document objectmodel Event handling
What is the DOM?
The
DOM is a W3C (World Wide Web Consortium) standard.
The
DOM defines a standard for accessing documents:
"The
W3C Document Object Model (DOM) is a platform and language-neutral interface
that allows programs and scripts to dynamically access and update the content,
structure, and style of a document."
The
W3C DOM standard is separated into 3 different parts:
Core
DOM - standard model for all document types
XML
DOM - standard model for XML documents
HTML
DOM - standard model for HTML documents
What
is the HTML DOM?
The
HTML DOM is a standard object model and programming
interface for HTML. It defines:
The
HTML elements as objects
The properties of
all HTML elements
The methods to
access all HTML elements
The events for
all HTML elements
In
other words: The HTML DOM is a standard for how to get, change, add, or
delete HTML elements.
The
Document Object Model (DOM) is a programming interface for HTML and XML
documents. It represents the page's structure as a logical tree, where
each part of the document (elements, attributes, text) is represented as a node
object. JavaScript interacts with this DOM to dynamically manipulate the
content, structure, and style of a web page.
Key
aspects of the DOM in JavaScript:
Tree
Structure:
The
DOM organizes the document as a hierarchical tree of
objects. The document object is the root, and all other elements
are its descendants.
Node
Types:
Various
types of nodes exist in the DOM tree, including:
Element
nodes: Represent HTML tags
(e.g., <div>, <p>, <a>).
Text
nodes: Represent the text content within elements.
Attribute
nodes: Represent attributes of elements
(e.g., href in <a>).
Comment
nodes: Represent HTML comments.
Accessing Elements:
JavaScript
provides methods to select and access specific elements in the DOM:
document.getElementById():
Selects an element by its unique ID.
document.getElementsByClassName():
Returns a collection of elements with a specific class name.
document.getElementsByTagName():
Returns a collection of elements with a specific tag name.
document.querySelector():
Returns the first element that matches a CSS selector.
document.querySelectorAll():
Returns all elements that match a CSS selector.
Example
The following example changes
the content (the innerHTML) of the <p> element
with id="demo":
Example
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello
World!";
</script>
</body>
</html>
The getElementById Method
The most common way to access an HTML element
is to use the id of the element.
In the example above the getElementById method used id="demo" to find the element.
The innerHTML Property
The easiest way to get the content of an
element is by using the innerHTML property.
The innerHTML property is useful
for getting or replacing the content of HTML elements.
The innerHTML property
can be used to get or change any HTML element,
including <html> and <body>.
In the example above, getElementById is a method,
while innerHTML is a property.
Manipulating
Elements:
Once
elements are accessed, their content, attributes, and styles can be modified:
element.textContent or element.innerHTML:
To change the text or HTML content of an element.
element.setAttribute():
To add or modify an attribute.
element.style.propertyName:
To change inline CSS styles.
Creating
and Removing Elements:
New
elements can be created and added to the document, and existing elements can be
removed:
document.createElement():
Creates a new element node.
document.createTextNode():
Creates a new text node.
parentNode.appendChild():
Appends a child node to a parent.
parentNode.removeChild():
Removes a child node from a parent.
No comments:
Post a Comment