Scribd
Upload
6 views

Document Object Model

The Document Object Model (DOM) defines how browsers create a model of an HTML page and how JavaScript interacts with it. It involves accessing and updating elements through various methods and properties, enabling manipulation of the DOM tree. Key operations include selecting elements, traversing nodes, and modifying content and attributes.

Uploaded by

Gautham J K
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

Document Object Model

The Document Object Model (DOM) defines how browsers create a model of an HTML page and how JavaScript interacts with it. It involves accessing and updating elements through various methods and properties, enabling manipulation of the DOM tree. Key operations include selecting elements, traversing nodes, and modifying content and attributes.

Uploaded by

Gautham J K
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

Document Object Model

• The Document Object Model (DOM) specifies how


browsers should create a model of an HTML page and
how JavaScript can access and update the contents of a
web page while it is in the browser window.
• The DOM is neither part of HTML, nor part of
JavaScript; it is a separate set of rules. It is implemented
by all major browser makers, and covers two primary
areas:
WORKING WITH DOM TREE
• Accessing and updating the DOM tree involves two steps:
• 1: Locate the node that represents the element you want to work
with.
• 2: Use its text content, child elements, and attributes.
STEP 1: ACCESS THE ELEMENTS

• SELECT AN INDIVIDUAL ELEMENT NODE


• getElementByld() – uses id attribute
• querySelector() –uses css selector
• SELECT MULTIPLE ELEMENTS (NODELISTS)
• getElementsByClassName()
• getElementsByTagName()
• querySelectorAll()
STEP 1: ACCESS THE ELEMENTS
• TRAVERSING BETWEEN ELEMENT NODES
• parentNode
• previousSibling / nextSibling
• firstChild / lastChild
STEP 2: WORK WITH THOSE ELEMENTS

• ACCESS/ UPDATE TEXT NODES


• The text inside any element is stored inside a text node
• 1. Select the element
• 2. Use the firstChild property to get the text node
• 3. Use the text node's only property (nodeValue) to get the
text from the element
STEP 2: WORK WITH THOSE ELEMENTS
• WORK WITH HTML CONTENT
• One property allows access to child elements and text content:
innerHTML
• Another just the text content: textContent
• Several methods let you create new nodes, add nodes to a tree,
and remove nodes from a tree:
• createElement()
• createTextNode()
• appendChild() / removeChild()
• This is called DOM manipulation.
STEP 2: WORK WITH THOSE ELEMENTS
• ACCESS OR UPDATE ATTRIBUTE VALUES
• Here are some of the properties and methods you can use to
work with attributes: className /id
• hasAttribute()
• getAttribute()
• setAttribute()
• removeAttribute()
Accessing Elements
Returning Nodelist
Returning Nodelist
SELECTING AN ELEMENT FROM A NODELIST
1) item() method

2)Array Syntax
Repeating Action for an entire Nodelist
Looping through a nodelist
Traversing the DOM
ADDING OR REMOVING HTML CONTENT
1. The innerHTML property
ADDING OR REMOVING HTML CONTENT
2. Adding via DOM Manipulation methods
DOM Manipulation method
REMOVING ELEMENTS VIA DOM MANIPULATION
REMOVING ELEMENTS VIA DOM MANIPULATION

You might also like