In this lesson, you will learn briefly about the Document Object model – the data representation of the web elements that comprise the page. We will look at what is DOM and how programming languages interact with the DOM to select elements to create animation and effects.
What is DOM?
When a web page is being loaded as a result of a user request, it displays the content of that web page. But that’s not all that browser has to deal with. Web browsers create a representation or model of the tags, attributes, and content of the page, behind the scene. This representation of the page is called the Document Object Model, or DOM for short. The DOM represents the elements of the document as nodes of the tree-like structure.
The Document Object Model, or the DOM, is an object-oriented representation of the web elements of the page, which can be interacted, modified with a client-side scripting language, such as
JQuery (JS library). It provides the information JS needs to interact with the elements on the web page through which it can be changed, add, or remove from the
HTML on the page.
The DOM doesn’t belong to any programming language. It is a standard form web browser developers have adopted. If you are interested, you can read more about the W3C DOM from https://www.w3.org/DOM/.
How does DOM work?
To understand how the DOM works, take a look at a very simple example.
<!doctype html> <html> <head><title> Understanding DOM</title></head> <body> <h1 id=”header”>Welcome</h1> <p>Welcome to TutorialsPanel.com<p> </body> </html>
As you can see, some tags such as <html>, <head>, etc. are wrapping other tags like
<title>, etc. Some content is also wrapped inside tags like
<p>. You can represent this relationship between tags using the tree-like structure. The
<html> tag is the “root” of the tree – like the eldest member in the family while other tags represent branches and nodes of the family trees. While
<body> tags contain further tags, but there is no tag after
Accessing the DOM elements
Access elements by ID
document.getElementById() function. So if there is a
<div> tag with the ID “header” you can select the element as:
If you use the
document.getElementByTagName(“div”) function, it will select every instance of the div tag which probably you don’t want to.
Access elements by Class Name
Now let’s say your web page contains div tags and few of these have class name ‘featured’ attached. The function
document.getElementByClassName(‘featured’) will retrieve all div elements with this class name.
Access elements by CSS selectors
This is a more comprehensive way to select elements using any CSS selector. For example, to select only
<div> tags with the ‘featured’ class, you can write the following:
You will learn more about the selection of elements in depth in the next lesson.
|Getting Started with jQuery||Tutorial Home||Selecting elements in jQuery|