HTML DOM
DOM HOME DOM Intro DOM Nodes DOM Methods DOM Properties DOM Access DOM Modify DOM Content DOM Elements DOM Events DOM Navigation DOM SummaryDOM Examples
DOM Examples 1 DOM Examples 2DOM Reference
HTML DOM ObjectsHTML DOM Methods
Methods are actions you can perform on nodes (HTML Elements)
Programming Interface
The HTML DOM can be accessed with JavaScript (and other programming languages).
All HTML elements are defined as objects, and the programming interface is the object methods and object properties .
A method is an action you can do (like add or modify an element).
A property is a value that you can get or set (like the name or content of a node).
The getElementById() Method
The getElementById() method returns the element with the specified ID:
HTML DOM Objects - Methods and Properties
Some commonly used HTML DOM methods:
- getElementById(id) - get the node (element) with a specified id
- appendChild(node) - insert a new child node (element)
- removeChild(node) - remove a child node (element)
Some commonly used 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 attributes nodes of a node (element)
You will learn more about properties in the next chapter of this tutorial.
A Real Life Object Illustration:
A person is an object.
A person's methods could be eat(), sleep(), work(), play(), etc.
All persons have these methods, but they are performed at different times.
A person's properties include name, height, weight, age, eye color, etc.
All persons have these properties, but their values differ from person to person.
Some DOM Object Methods
Here are some of the (most common) methods you will learn about in this tutorial:
| Method | Description |
|---|---|
| getElementById() | Returns the element that has an ID attribute with the a value |
| getElementsByTagName() | Returns a node list (collection/array of nodes) containing all elements with a specified tag name |
| getElementsByClassName() | Returns a node list containing all elements with a specified class |
| appendChild() | Adds a new child node to a specified node |
| removeChild() | Removes a child node |
| replaceChild() | Replaces a child node |
| insertBefore() | Inserts a new child node before a 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 changes the specified attribute, to the specified value |
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
