Tips and tricks for USING THE DOM API : Remember these pointers when using the DOM (Document Object Model) API


  • Tips and tricks for USING THE DOM API: The DOM (or Document Object Model) is an API (Application Program Interface). When your HTML document runs in your web browser, it becomes part of the DOM called the document object. The way the document object is structured allows you to write code that will access and change individual HTML elements.

  • You can use the DOM’s built-in functions to make changes to HTML elements after they have been drawn on your screen. This is important if you want to make an interactive web page or web-based app that responds to the user.


  • To access the DOM you have to type the document keyword. You also have to use dot (.) notation. Each new instruction for the DOM has to be separated by a dot.


  • You can use DOM methods and properties to make changes to your HTML elements.


  • getElementById is a DOM method that allows you to find a HTML element on your page by its id attribute.


  • innerHTML is a DOM property. You can set the innerHTML of any HTML element. Using innerHTML is a good way to set or change the contents of a HTML element.


  • createElement is a DOM method that lets you create a new HTML element. You have to tell your browser what type of element you want to create.


  • appendChild is a DOM method that lets you add a new HTML element to an existing HTML element.


The DOM saves you lots of time and makes it much easier to create a dynamic web page!

Related Posts:

Mozilla on the Document Object Model (DOM)

Wikipedia on the DOM (Document Object Model)

W3.ORG (What is the DOM?)

W3SCHOOLS (JavaScript and HTML DOM Reference)

Redirect New Registered Users to a Specific Page – WordPress

Paginate Your WordPress Site Without Plugins

How do I install plugins in WordPress?

The background-color CSS property

Object-Oriented Programming (OOP)

Build to-do list web-app with code

WordPress Posts vs Pages