HTML DOM Methods


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

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


Programming

The HTML DOM is accessible through JavaScript (and other programming languages).

All HTML elements are defined as objects, and programming interfaces are object methods and object properties.

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

Properties are values that 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! 


HTML DOM Object - Methods and Properties

Some common HTML DOM methods:

  • getElementById(id) - get the node (element) with the specified id

  • appendChild(node) - inserts a new child node (element)

  • removeChild(node) - removes child nodes (elements)

Some commonly used HTML DOM attributes:

  • innerHTML - the text value of the node (element)

  • parentNode - the parent node of the node (element)

  • childNodes - the child nodes of the node (element)

  • attributes - the attribute node of the node (element)

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


Objects in real life

A person is an object.

Human methods might be eat(), sleep(), work(), play() and so on.

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

A person's attributes include name, height, weight, age, gender, and more.

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


DOM object methods

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

MethodDescription
getElementById()Returns the element with the specified ID.
getElementsByTagName()Returns a list of nodes (collection/array of nodes) containing all elements with the specified label name.
getElementsByClassName()Returns a list of nodes containing all elements with the specified class name.
appendChild()Adds a new child node to the specified node.
removeChild()Delete child nodes.
replaceChild()Replace child nodes.
insertBefore()Inserts a new child node before the specified child node.
createAttribute()Create property nodes.
createElement()Create element nodes.
createTextNode()Create text nodes.
getAttribute()Returns the specified property value.
setAttribute()Sets or modifies the specified property to the specified value.