Javascript DOM Introduction

The Document Object Model (DOM) represents the whole HTML document and XML(Extensible markup language) documents. It specifies the logical structure of documents and the way a document is accessed and manipulated.

Note: It is called a Logical structure because DOM doesn’t provide any relationship between objects.

Document Object Model(DOM) is a way to represent the webpage in a structured hierarchical way so that it will become easier for programmers and users to glide through the document. With DOM, we can easily access and manipulate tags, IDs, classes, Attributes, or Elements using commands or methods provided by the Document object.

Properties of document object:

Window Object: Window Object is always at top of the hierarchy.

Document object: When an HTML document is loaded into a window and it becomes a document object.

Form Object: It is represented by form tags.

Link Objects: It is represented by link tags.

Anchor Objects: It is represented by href tags.

Form Control Elements: It has many control elements such as text fields, buttons, radio buttons, and checkboxes, etc.

Methods of document object:

Method  –   Description

write(“string”) – writes the given string on the document.

writeln(“string”) – writes the given string on the document with a newline character at the end.

getElementById() – returns all element having the given id value.

getElementsByName() – returns the elements having the given name value.

getElementsByTagName() – returns the elements having the given tag name.

getElementsByClassName() – returns the elements having the given class name.