Scribd
Upload
646 views18 pages

Understanding JavaScript HTML DOM

The document discusses how the JavaScript HTML DOM model allows JavaScript to dynamically access and modify HTML elements, properties, styles and events by representing them as objects that can be manipulated; it describes how the DOM forms a tree structure of all elements in an HTML page with the document object at the top, and explains different DOM methods for finding, selecting, and changing element content, styles, and attributes.

Uploaded by

Sidra Shaikh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
646 views18 pages

Understanding JavaScript HTML DOM

The document discusses how the JavaScript HTML DOM model allows JavaScript to dynamically access and modify HTML elements, properties, styles and events by representing them as objects that can be manipulated; it describes how the DOM forms a tree structure of all elements in an HTML page with the document object at the top, and explains different DOM methods for finding, selecting, and changing element content, styles, and attributes.

Uploaded by

Sidra Shaikh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
  • Introduction
  • The HTML DOM
  • JavaScript and the DOM
  • Understanding the DOM
  • DOM Methods and Properties
  • HTML DOM Document
  • Finding HTML Elements
  • Changing HTML Styles

JavaScript HTML DOM

The HTML DOM (Document Object Model)

• When a web page is loaded, the browser


creates a Document Object Model of the
page.
• The HTML DOM model is constructed as a
tree of Objects:
DOM FLOW CHART
With the object model, JavaScript gets all the power it
needs to create dynamic HTML:

• JavaScript can change all the HTML elements in the


page
• JavaScript can change all the HTML attributes in the
page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and
attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the
page
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
HTML DOM Methods
• HTML DOM methods are actions you can perform
(on HTML Elements)
• HTML DOM properties are values (of HTML
Elements) that you can set or change
The getElementById Method
• The most common way to access an HTML
element is to use the id of 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 HTML DOM Document
• In the HTML DOM object model, the
document object represents your web page.
• The document object is the owner of all other
objects in your web page.
• If you want to access objects in an HTML page,
you always start with accessing the document
object.
Finding HTML Elements

Method Description
[Link]() Finding an element by element id
[Link]() Finding elements by tag name
[Link]() Finding elements by class name
[Link][] Finding elements by HTML element
objects
Finding HTML Elements
• Often, with JavaScript, you want to manipulate
HTML elements.
• To do so, you have to find the elements first.
There are a couple of 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 HTML object
collections
Changing HTML Style
• Style
 [Link](id).[Link] = new style
 <body>

<p id="p2">Hello World!</p>

<script>
[Link]("p2").[Link] = "blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
After clicking
After clicking on the text an
alert box appears.
Finding HTML Elements by Class Name
• If you want to find all HTML elements with the same class
name. Use this method:
• [Link](“abc");
• The example above returns a list of all elements with
class=“abc".

[Finding elements by class name does not work in Internet Explorer 5,6,7, and 8]
After clicking
[Link]()

• Finding elements by tag name

View It
After clicking

JavaScript HTML DOM
The HTML DOM (Document Object Model) • When a web page is loaded, the browser creates a Document Object Model of the page.
DOM FLOW CHART
With the object model, JavaScript gets all the power it needs to create dynamic HTML: • JavaScript can change all the HTML e
What is the HTML DOM? The HTML DOM is a standard object model and programming interface for HTML. It defines: • The HTML el
HTML DOM Methods • HTML DOM methods are actions you can perform (on HTML Elements) • HTML DOM properties are values (of HTML
The getElementById Method • The most common way to access an HTML element is to use the id of the element.
The innerHTML Property • The easiest way to get the content of an element is by using the innerHTML property. • The innerHTM
The HTML DOM Document • In the HTML DOM object model, the document object represents your web page. • The document object is
Finding HTML Elements Method Description document.getElementById() Finding an element by element id document.getElementsByTag

You might also like