DOM | Document Object Model

By | June 3, 2020

As the name suggests, in this article we talk about DOM stands for Document object model (DOM). In DOM we discuss it’s properties and programmatical methods that are used for manipulating the document.

Introduction Document Object Model | What is a DOM

  • In this dom tutorial, DOM or document object model is an application programming interface (API) for HTML and XML (Xtensible Markup Language) documents.
  • It defines the logical structure of the documents and the way that the document is accessed by Javascript DOM.
  • It’s a structure called logical structure because they have no relations between objects.
  • With DOM we have easy access and manipulate the HTML tags, IDs, classes, attributes or properties using predefined DOM methods or functions.
	DOM(Document Object Model)

Structure of the Document Object Model

As the above discussion, the DOM has a logical structure that looks like a tree structure. We prove that statement using a Form a DOM example where we apply DOM methods.

All working the same on the document model in javascript.

DOM (Document object model)

Image Reference: https://www.geeksforgeeks.org

In the above picture, the properties of document objects are accessed by the document object method.

  1. Window Object: Window object is always on the top of the hierarchy.
  2. Document Object: When HTML is loaded on a window it becomes a document object.
  3. Link Object: Link objects represents by link tags in HTML.
  4. Form Object: Form objects defined by Form tag in HTML.
  5. Anchor Objects: It represents <a href=" "> tag.
  6. Form Elements: Form can have many control elements like textarea, checkboxes, radio buttons, etc.

DOM Object Methods

  1. document.write(“string”): writes the given string on the document
  2. document.getElementById(): returns the element having the given id value.
  3. document. getElementsByName(): returns all the elements having the given name value.
  4. document.getElementsByTagName(): returns all the elements having the given tag name.
  5. document.getElementsByClassName(): returns all the elements having the given class name.

Code Example of DOM

See the Pen DOM (Document Object Model) by Bikash Panda (@phpcodertech) on CodePen.

Happy Coding..!

Share and Enjoy !

0Shares
0 0

Subscribe For Latest Updates

Sign up to best of PHP Code Solutions, informed analysis and opinions on what matters to you.
Invalid email address
We promise not to spam you. You can unsubscribe at any time.

8 thoughts on “DOM | Document Object Model

  1. Pingback: Image Upload using Ajax in 4 Steps - PHPCODER.TECH

  2. Pingback: 4 Steps to Upload Image Using Ajax and JQuery - PHPCODER.TECH

  3. Pingback: How jQuery DataTable Works - PHPCODER.TECH

  4. Pingback: JavaScript Append HTML to Body - PHPCODER.TECH

  5. Pingback: Integrate Google reCaptcha in Codeigniter - PHPCODER.TECH

  6. Pingback: JavaScript Array | Array length, push, pop, shift, unshift, IndexOf, forEach - PHPCODER.TECH

  7. Pingback: Display Current Date & Time in HTML using Javascript-PHPCODER.TECH

  8. Pingback: Bootstrap Datepicker - Complete Solution to Integrate - PHPCODER.TECH

Leave a Reply

Your email address will not be published. Required fields are marked *