DOM Introduction

DOM(Document Object Model) provides a way for JavaScript to represent the nested tags in HTML or XML markup as a tree of nested objects, referred to as nodes.

What is Node?

A node is a container for related variables and functions and node members helps us to query and manipulate markup, like finding, creating, or deleting content.

What You Will Learn?

You will learn

To change the content of HTML elements
To change the style (CSS) of HTML elements
To react to HTML DOM events
To add and delete HTML elements

Access DOM

Modify nodes
Create new nodes
Remove nodes

The W3C DOM standard is separated into 3 different DOM types:

Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents

There are the 11 DOM interfaces.

Attr
CharacterData
Document
Element
HTMLCollection
HTMLDocument
HTMLElement
NamedNodeMap
Node
NodeList
Text

Below image represents HTML document as a nested set of boxes. Tags such as <body> and </body> enclose other tags, which in turn contain other tags or text.

<html>

<head>
    <title> My home page </title>
</head>

<body>
    <h1> My home page </ h1>
        <p> Hello , I am M a r i j n and this is my home page . </p>
        <p> I also wrote a book ! Read it
            <a href="http :// rookienerd.com"> here </a>. </p>
</body>

</html>

<Image>