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:

  1. Core DOM - standard model for all document types
  2. XML DOM - standard model for XML documents
  3. HTML DOM - standard model for HTML documents

There are the 11 DOM interfaces.

  1. Attr
  2. CharacterData
  3. Document
  4. Element
  5. HTMLCollection
  6. HTMLDocument
  7. HTMLElement
  8. NamedNodeMap
  9. Node
  10. NodeList
  11. 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.


    <title> My home page </title>

    <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 ://"> here </a>. </p>



Related Tutorial
Follow Us #
Contents +