Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

HTML DOM method


May 09, 2021 HTML DOM


Table of contents


HTML DOM method


HTML DOM method is the action we can perform on nodes (HTML elements), learning HTML DOM method is essential for you to learn HTML DOM, start your learning!


Programming interface

HTML DOMs are accessible through JavaScript (and other programming languages).

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

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

A property is a value that you can get or set, such as the name or content of a node.


GetElementById() method

The getElementById() method returns an element with a specified ID:

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

Try it out . . .


HTML DOM objects - methods and properties

Some common HTML DOM methods:

  • getElementById (id) - Get nodes (elements) with a specified id
  • AppendChild (node) - Insert new child nodes (elements)
  • removeChild (node) - Delete child nodes (elements)

Some common HTML DOM properties:

  • InnerHTML - The text value of the node (element).
  • parentNode - the parent node (element).
  • ChildNodes - a child node of a node (element).
  • attributes - the property node of the node (element).

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


Real-life objects

Someone is an object.

The human method may be eat(), sleep(), work(), play() and so on.

Everyone has these methods, but they are executed at different times.

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

Everyone has these properties, but their values vary from person to person.


Some DOM object methods

Here are some common ways you'll learn in this tutorial:

Method Describe
getElementById() Returns an element with the specified ID.
getElementsByTagName() Returns a list of nodes (an array of collections/nodes) that contain all elements with the specified label name.
getElementsByClassName() Returns a list of nodes that contain all elements with the specified class name.
appendChild() Add a new child node to the specified node.
removeChild() Remove the child node.
replaceChild() Replace the child node.
insertBefore() Insert a new child node in front of the specified child node.
createAttribute() Create a property node.
createElement() Create an element node.
createTextNode() Create a text node.
getAttribute() Returns the specified property value.
setAttribute() Set or modify the specified property to the specified value.

The common object methods used by HTML DOM in the table above are very useful, so you can't write them down, so it's best to be able to favorite them or save pages to favorites for later!