HTML DOM Methods

HTML DOM methods are actions we can perform on nodes (HTML elements).

HTML DOM properties are values that we can set and modify on nodes (HTML elements).

Programming Interface

The HTML DOM can be accessed through JavaScript (and other programming languages).

All HTML elements are defined as objects, and the programming interface consists of object methods and object properties.

Methods are actions you can perform (such as adding or modifying elements).

Properties are values you can get or set (such as the name or content of a node).

getElementById() Method

The getElementById() method returns the element with the specified ID:

Example

var element=document.getElementById("intro");

Try it Yourself »

HTML DOM Objects - Methods and Properties

Some common HTML DOM methods:

  • getElementById(id) - gets the node (element) with the specified id
  • appendChild(node) - inserts a new child node (element)
  • removeChild(node) - removes a child node (element)

Some common HTML DOM properties:

  • innerHTML - the text value of a node (element)
  • parentNode - the parent node of a node (element)
  • childNodes - the child nodes of a node (element)
  • attributes - the attribute nodes of a node (element)

You will learn more about properties in the next chapter of this tutorial.

Real Life Objects

A person is an object.

A person's methods could be eat(), sleep(), work(), play(), and so on.

All people have these methods, but they execute them at different times.

A person's properties include name, height, weight, age, gender, and so on.

All people have these properties, but their values differ from person to person.

Some DOM Object Methods

Here are some common methods you will learn in this tutorial:

Method Description
getElementById() Returns the element with the specified ID.
getElementsByTagName() Returns a node list (collection/node array) containing all elements with the specified tag name.
getElementsByClassName() Returns a node list containing all elements with the specified class name.
appendChild() Adds a new child node to the specified node.
removeChild() Removes a child node.
replaceChild() Replaces a child node.
insertBefore() Inserts a new child node before the specified child node.
createAttribute() Creates an attribute node.
createElement() Creates an element node.
createTextNode() Creates a text node.
getAttribute() Returns the specified attribute value.
setAttribute() Sets or modifies the specified attribute to the specified value.
Other Extensions