Scribd
Upload
25 views39 pages

Ocument Bject Odel: A Standard For How To Get, Change, Add, or Delete HTML Elements

Uploaded by

Swati Thakur
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
25 views39 pages

Ocument Bject Odel: A Standard For How To Get, Change, Add, or Delete HTML Elements

Uploaded by

Swati Thakur
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/ 39

DOM

Document Object Model


A standard for how to get, change, add, or delete HTML elements.
What to expect?
● Quick introduction to DOM
● How the DOM represents an HTML document in memory?
● How to use APIs to create web content and applications
JavaScript makes the HTML page active and dynamic via the DOM.
You want a button to change colours when it gets clicked or an image to appear
when the mouse hovers over text.

First, you need to reference those elements from your JavaScript.


What is DOM?
- A programming interface for web documents.
- DOM is not a programming language.
- Represents the page so that programs can change the document structure,
style, and content.
- The DOM is a tree-like representation of the web page that gets loaded into
the browser.
- The DOM represents the document as nodes and objects.
- Without it, the JavaScript language wouldn't have any model or notion of web
pages, HTML documents, SVG documents, and their component parts.
- Web API used to build websites
Accessing the DOM
When you create a script, whether inline in a <script> element or included in the web
page, you can immediately begin using the API for the document or window objects to
manipulate the document itself.

The DOM was designed to be independent of any particular programming


language, making the structural representation of the document available from a
single, consistent API

Let’s look at an example:


DOM contd
It represents the web page using a series of objects. The main object is the
document object, which in turn houses other objects which also house their own
objects, and so on.
DOM Tree
The DOM is a tree-like representation of the web page that gets loaded into the
browser.
When a web browser parses an HTML document, it builds a DOM tree and
then uses it to display the document.

Let’s look at the different objects


The Document Object
This is the top most object in the DOM. It has properties and methods which you
can use to get information about the document using a rule known as dot notation.
Example
The createElement() method
Create a specified element and insert it into the DOM:
Finding HTML Elements
If you want to manipulate HTML elements.

But we need to find the elements first. Multiple ways to do this:

● Finding HTML elements by id


● Finding HTML elements by tag name
● Finding HTML elements by class name
● Finding HTML elements by CSS selectors
● Finding HTML elements by HTML object collections
Finding HTML Elements
getElementById()
Method to get an element from the document by its unique id attribute.
getElementsByTagname()
Method to access one or more elements by their HTML tag name
getElementByClassName()
Finding HTML Elements by CSS Selectors : querySelectorAll)
Access one or more elements from the DOM that matches one or more CSS selectors.

Finds all HTML elements that match a specified

CSS selector (id, class names, types, attributes,

values of attributes, etc), use the querySelectorAll() method.


Finding HTML Elements
by HTML Object
Collections
Difference Between an HTMLCollection and a NodeList

HTML collection NodeList


getElementsByClassName() and querySelectorAll() method returns a static
getElementsByTagName() methods NodeList.
return a live HTMLCollection.

A collection of document elements. A collection of document nodes (element


nodes, attribute nodes, and text nodes).

Items can be accessed by their name, id, or Items can only be accessed by their index
index number. number.

It is always a live collection. Example: If you Most often a static collection. Example: If
add a <li> element to a list in the DOM, the you add a <li> element to a list in the DOM,
list in the HTMLCollection will also change. the list in NodeList will not change.
Let’s look at all the other elements you can see as well

● document.anchors
● document.body
● document.documentElement
● document.embeds
● document.forms
● Document.head
● Document.images
● Document.links
● Document.scripts
● document.title
Changing HTML Elements
Changing HTML Content
innerHTML property

document.getElementById(id).innerHTML = new HTML


Changing the Value of an Attribute
Dynamic HTML content
document.write(): write directly to the HTML output stream

Never use document.write() after the document is loaded. It will overwrite


the document.

The setAttribute() method sets a new value to an attribute.

If the attribute does not exist, it is created first.


element.setAttribute("style", "background-color:red;"); vs

element.style.backgroundColor = "red";
Adding and Deleting Elements
DOM Nodes

■ The entire document is a


document node
■ Every HTML element is an element
node
■ The text inside HTML elements are
text nodes
■ Every HTML attribute is an
attribute node (deprecated)
■ All comments are comment nodes
The node method
You can access any element by using the following properties with the node
object:

● node.childNodes – accesses the child nodes of a selected parent


● node.firstChild – accesses the first child of a selected parent
● node.lastChild – accesses the last child of a selected parent.
● node.parentNode – accesses the parent of a selected child node.
● node.nextSibling – accesses the next consecutive element (sibling) of a
selected element.
● node.previousSibling – accesses the previous element (sibling) of a selected
element
A common error in DOM processing is to expect an element node to contain
text.
Types of Nodes
DOM Events
HTML DOM allows JavaScript to react to
HTML events:
A JavaScript can be executed when an event occurs, like when a user clicks on an
HTML element.

To execute code when a user clicks on an element, add JavaScript code to an


HTML event attribute:

onclick=JavaScript
Onload and Onunload functions
The onload and onunload events are triggered when the user enters or leaves the
page.

The onload event can be used to check the visitor's browser type and browser
version, and load the proper version of the web page based on the information.

The onload and onunload events can be used to deal with cookies.
DOM EventListener
● Attaches an event handler to the specified element (without overwriting existing event
handlers).
● You can add many event handlers(even of the same type) to one element.
● You can add event listeners to any DOM object not only HTML elements. i.e the window
object.
● The addEventListener() method makes it easier to control how the event reacts to
bubbling.
● When using the addEventListener() method, the JavaScript is separated from the HTML
markup, for better readability and allows you to add event listeners even when you do not
control the HTML markup.
● You can easily remove an event listener by using the removeEventListener() method.
Event Bubbling or Event Capturing?
Two ways of event propagation in the HTML DOM - bubbling and capturing.
Event propagation is a way of defining the element order when an event occurs. If
you have a <p> element inside a <div> element, and the user clicks on the <p>
element, which element's "click" event should be handled first?
In bubbling the inner most element's event is handled first and then the outer: the <p>
element's click event is handled first, then the <div> element's click event.
In capturing the outer most element's event is handled first and then the inner: the <div>
element's click event will be handled first, then the <p> element's click event.

You might also like