HTML DOM Complete Reference

Last Updated : 12 Jul, 2025

HTML DOM (Document Object Model) is a programming interface that represents the elements of an HTML document in a tree-like structure.

Allows developers to change content and layout using JavaScript.
Enables dynamic updates and user interaction on websites.
Facilitates the addition, removal, or modification of HTML elements.

HTML

<html>
<head>
	<script>
		function changeText() {
			document.getElementById("demo").textContent = "Hello, World!";
		}
	</script>
</head>
<body>
	<p id="demo">Original Text</p>
	<button onclick="changeText()">Change Text</button>
</body>
</html>

HTML DOM Attribute Object:

Methods:

Methods	Description
getNamedItem()	Return the attribute node from the NamedNodeMap object.
item()	Return the node to the specified index.
removeNamedItem()	Remove the node with the specified name in a named node object.

Properties:

Properties	Description
isId	Returns a true if the Element has an attribute type of ID, otherwise, it returns a false
length	Get the number of items in a NodeList object.
specified	It returns true if the element has a specified attribute, otherwise, it returns a false
value	Return the value of any attribute.

Console Object Methods:

Methods	Description
assert( )	Write a message for user on the console only if the expression evaluates to false
clear()	Clear the console and writes some message
count()	Write the number of times the console.count() method is called.
error()	Display an error message on the console
group()	Create a group of messages in the console
groupCollapsed()	Create a collapsed group of messages in the console.
groupEnd()	To indicate the end of a group of messages in the console
info()	Writing a message in the console.
log()	It is used for writing a message in the console.
table()	It is used for writing data in tabular form in the console view.
time()	It is used to start a timer in the console view.
timeEnd()	It is used to end a timer started by the console.time() method.
trace()	It is used to display the trace which represents how the code ended up at a certain point.
warn()	It is used to write a warning message in the console.

Document Object Properties:

Properties	Description
activeElement	Return the currently active elements in the HTML document.
baseURI	Return the base Uniform Resource Identifier (URI) of the document.
body	It only returns the content present in the <body> Tag.
cookie	cookies are used by websites to keep track of user-specific information.
characterSet	Return the character encoding for the document at the time of parsing.
defaultView	It is used to return the document Window Object
designMode	It is used to specify whether the document is editable or not.
doctype	Return the doctype of any HTML document.
documentElement	Return the documentElement as an Element Object
documentMode	Detect the document mode used by the browser to render the current page.
domain	Return the domain name of the website server that is loaded or running in the current document.
fullscreenElement	Return the element that is currently in fullscreen.
head	Return the first occurrence of the head if multiple heads in the document
images Collection	Return the collection of <img> elements in the document.
implementation	Returns the DOMImplementation object associated with the current document.
inputEncoding	Returns the character encoding used for parsing the document.
lastModified	Return the date and time of the current document that was last modified.
readyState	Return the loading status of the current document. This property is used for read-only.
referrer	Return the URI of the page that linked to the current page.
strictErrorChecking	Returns whether strict error checking can be enforced on a document or not.
title	It is used to sets the value of the title in the document.
URL	Return a string that contains the complete URL of the current document.

Methods	Description
addEventListener()	Attaches an event handler to the specified element.
adoptNode()	It is used to adopt a node from another document.
close()	It is used to close the output stream.
createAttribute()	It is used to create an attribute with the specified name and returns the attribute object.
createComment()	Create a comment node with some specified text.
createDocumentFragment()	A new document fragment that can be inserted into any document can be created using the offscreen node.
createElement()	The document.createElement() is a method used to create the HTML element.
createEvent()	Creates an event object of the specified type.
createTextNode()	Create a TextNode which contains element node and a text node.
execCommand()	Execute a command specified by the user on the editable selected section.
fullscreenEnabled()	Check the document can be viewed in full screen mode or not.
getElementById()	Returns an element with a specified value.
getElementsByClassName()	Returns a collection of elements with a specified class name(s).
getElementsByName()	Returns collection of all elements of particular document by name.
getElementsByTagName()	Returns the collection of all the elements in the document with the given tag name.
hasFocus()	Indicating whether an element or document has the focus or not.
importNode()	Copy of a node from another document and imports it to the current document.
normalize()	The normalize() method does not require any parameter.
normalizeDocument()	Normalize an HTML document by remove any empty text nodes if exists.
open()	The open() method allows you to write on a document.
querySelector()	Return the first element that matches a specified CSS selector(s) in the document.
removeEventListener()	Remove an event handler associated with the addEventListener() method
renameNode()	It is used to rename the nodes.
write()	It is used to write some content or JavaScript code in a Document.
writeln()	It is used to write a document with additional property of newline character after each statement.

Collection	Description
anchors	Return the collection of all <a> element in a HTML document.
applets	Return a collection of all possible elements available in the HTML
embeds	Return the collection of all embedded elements.
forms	Return the collection of all <form> elements in a HTML document.
links	Return the collection of all <a> and <area> elements with “href” attribute in a HTML document.
scripts	Return the collection of all <script> element in HTML document.

Properties	Description
accessKey	Return the accesskey attribute of an element.
attributes	Returns the group of node attributes specified by NamedNodeMap objects.
childElementCount	It counts only child element except for text and comment nodes.
childNodes	Returns a node’s child nodes as a nodeList object.
children	Return HTMLcollection of all the child elements of the specified element.
classList	Returns the class names of the element in the form of DOMTokenlist()
className	Return the value of an element’s class attribute.
clientHeight	Return the viewable height of an element in terms of the pixel.
clientLeft	Return the width of the left border to an element in terms of pixel.
clientTop	Return the width of the top border to an element in terms of pixel.
clientWidth	It is used to return the viewable width of a specific element
dir	Return the value of dir attribute in an Element.
firstChild	Return the firstchild Node of its parent node element.
firstElementChild	Return the first child of any node PreRequisites
innerHTML	Return the HTML content of an element
innerText	Returns the text content of a specified node and its descendants.
isContentEditable	Return a boolean where true means the content of an element is editable.
lastChild	Return the last child of the specified node.
lastElementChild	Return the last child element of the specified element or null if there is no last element.
nextSibling	Return the next node of the specified node as Node object
nextElementSibling	Return the immediate next element of the specified element,
nodeName	Return the name of the specified node as a string.
nodeType	Find out the type of the node that we are referring to.
nodeValue	Its used to set or get the nodeValue in Any Html document.
offsetHeight	Returns the layout height of an element as an integer.
offsetWidth	Returns the layout width of an element as an integer.
offsetLeft	Returns the left position in pixels.
offsetParent	Return the nearest ancestor of an element.
offsetTop	Return the top position which is relative to the top of the offsetParent element.
ownerDocument	Returns the top-level document object of the node.
parentNode	Return the parent node of the specified node as Node object. It is a read-only property.
parentElement	Returns the parent element of a particular child element.
previousSibling	Return the previous node of the specified node as Node
previousElementSibling	Return the previous element of the same level of the given element.
scrollHeight	It is used to return the height of an element.
scrollLeft	It is used to return or set the number of pixels an element
scrollTop	Return or set the number of pixels an element is scrolled vertically.
scrollWidth	It is used to return the width of an element.
tagName	It is used to return the tagname of the Element.
textContent	Return the text content of the specified node and all its descendants.
title	It is used to return the title of the HTML document

Methods	Description
addEventListener()	Attaches an event handler to the specified element.
appendChild()	Create a text node as the last child of the node.
blur()	Remove the keyboard focus from the current element
click()	It is used to simulate the mouse click on an element.
cloneNode()	It is used to copy or clone a node on which the cloneNode() method is called.
compareDocumentPosition()	It is used to compare two nodes and it returns an integer
contains()	It is used to find whether the specified node is a descendant of the given node.
exitFullscreen()	It is currently in a full-screen mode to be taken out of full-screen mode.
focus()	Remove the focus with the help of blur() method.
getAttribute()	It is used to get the value of the attribute of the element.
getAttributeNode()	Return the attribute node with the specified name of an element, as an attribute object.
getBoundingClientRect()	Returns the relative positioning to the viewport.
getElementsByClassName()	Returns a collection of elements with a specified class name(s).
getElementsByTagName()	Returns the collection of all the elements in the document with the given tag name.
insertAdjacentElement()	Inserts the specified element at the specified position
insertAdjacentHTML()	Inserts HTML code into a specified position.
insertAdjacentText()	Inserts a a text into a specified position.
insertBefore()	Insert a new node before the existing node as specified by the user.
isDefaultNamespace()	Return boolean true if the specified namespace is default otherwise, it returns boolean false
isEqualNode()	Checks whether the two nodes are equal or not.
isSameNode()	Checks whether the two nodes are same or not.
Node isSupported()	Check the specified feature is supported by the specified node or not.
normalize()	Merge the adjacent text nodes with the first text node
querySelector()	Return the first element that matches a specified CSS selector(s) in the document.
querySelectorAll()	Return a collection of an element’s child elements
removeAttribute()	Remove an attribute with specified name from the element.
removeAttributeNode()	Remove the specified attribute from the current element.
removeChild()	Remove a specified child node of the given element.
removeEventListener()	Remove an event handler associated with the addEventListener() method.
replaceChild()	Replace a child node with a new node within the given parent node.
setAttributeNode()	It is used to add the specified attribute node to an element.

Geolocation Object:

Properties	Description
Geolocation coordinates	Return the position and altitude of the device on Earth.
Geolocation position	Return the position of a device on Earth.

History Object:

Methods	Description
History back()	It is used to load the previous URL in the history list.
History forward()	It is used to load the next URL in the history list.
History go()	It is used for loading a specific URL from the history list.

Properties	Description
History length Property	Return the count of URLs in the history list of the current browser window.

DOM HTMLCollection:

Properties	Description
length	Return the collection of all HTML elements in a document.

Methods	Description
item()	Return the content of the element at the given index of the collection of all HTML elements.
namedItem()	Return the element with having the specified ID, OR, name, or content

Location Object

Properties	Description
hash	Return the anchor part of a URL.
host	Returns the hostname and port of a URL.
hostname	Return the hostname of the current URL.
href	Return the complete URL of the current page.
origin	Return the protocol, hostname, and port number of a URL.
pathname	Returns a string that represents the pathname of the URL.
port	Sets the port number of the current URL.
protocol	Return the protocol or set the protocol of the current URL.
Search	Set or return the query part of URL including the question mark.

Methods	Description
assign( )	It is used for loading a new document
reload()	It is used to reload the current document.
replace()	It is used to replace the current document with the specified one.

The Navigator Object:

Properties	Description
appCodeName	Returning the code name of the browser.
appName	It is used for returning the name of the browser.
appVersion	Returns a string that represents the version information of the browser.
cookieEnabled	It returns true if cookies are enabled else it returns false.
geolocation	Return a geolocation object by the browser which can be used to locate a user’s position.
language	It is used for returning the browser’s language version.
onLine	Return Boolean value which specifies whether a browser is in the online or offline mode.
platform	Return the platform for which the browser is compiled.
product	Return the browser’s engine(product) name.
userAgent	It is used for returning the user-agent header’s value sent to the server by the browser.

Methods	Description
javaEnabled( )	It is used for returning a Boolean value that specifies
taintEnabled()	This method would always return a Boolean false value.

Screen Object:

Properties	Description
availHeight	It is used for returning the height of the user’s screen, in pixels.
availWidth	It is used for returning the width of the user’s screen, in pixels.
colorDepth	Return the bit depth of the color palette for displaying images, in bits per pixel.
height	It is used for returning the total height of a user’s screen.
pixelDepth	It is used for returning the color resolution of the visitor’s screen.
width	It is used for returning the total width of a user’s screen.

Style object:

Properties	Description
alignContent	It is used to align the items of a flexible container
alignItems	Return the default alignment of items in a flexible container.
alignSelf	Return the alignment for a selected item inside a flexible container
animation	To animate transitions from one CSS style to another CSS style
animationDelay	Returns the delay after which the animation should start.
animationDirection	Return the animation direction.
animationDuration	To set the time interval to complete one cycle of an animation.
animationFillMode	The animation is not playing or when an animation is finished or when there is a delay in animation
animationIterationCount	Return how many times an animation should be played.
animationName	Returns a name for @keyframes animation.
animationTimingFunction	The time of transition between the styles to make transitions smooth.
animationPlayState	It is used to specify whether an animation is running or paused.
background	Return the background of an element.
backgroundAttachment	Return whether the background image should be fixed or scroll with the content.
backgroundColor	Return the background-color of an element.
backgroundImage	Return the background image of an element.
backgroundPosition	Return position of the background-image in an element.
backgroundRepeat	HTML DOM is used to set or return the CSS
backgroundClip	Return the painting area of the background.
backgroundOrigin	The background image is relative to in position.
backgroundSize	Return the size of the background image.
backfaceVisibility	Element visible or invisible when the element is not facing the screen.
border	It is used to sets or returns the style of an element’s border.
borderBottomStyle	Returns the three different border-bottom property such as border-bottom-width,etc.
borderBottomColor	Return the color of bottom border of an element.
borderBottomLeftRadius	Return the radius of the border of the bottom-left corner.
borderBottomRightRadius	Set the style of the radius of the bottom-right corner of its border.
borderBottom	Return the style of the bottom border of an element.
borderBottomWidth	Return the width of bottom border of an element.
borderCollapse	Returns the border of the table collapsed into a single border or not.
borderColor	Specifies the color of the element’s border.
borderImage	It is used for setting the borderImageSource, borderImageSlice,etc.
borderImageOutset	The border, image is to be painted is called the border-image space.
borderImageRepeat	Return the borderImageRepeat property.
borderImageSlice	Specify the value of this property in terms of percentage, number or global values.
borderImageSource	Return the image to be used instead of the styles given by the border-style property.
borderImageWidth	Return the width of the border image.
borderLeft	It is used to set or returns the three different
borderLeftColor	Get the color to left border of element.
borderLeftStyle	Set or return the left border style of an element.
borderLeftWidth	Return the width of the left border of an element.
borderRadius	Return the four different borderRadius
borderRight	Returns the three different border-right property
borderRightColor	Return the style of right border of an element.
borderRightWidth	Return the width of the right border of an element.
borderSpacing	Return the spacing between the cells in a table.
borderStyle	Return the border style of an element.
borderTop	Returns the three different border-top property
borderTopColor	Get the color of top border of element.
borderTopLeftRadius	Return the radius of the top left border of an element.
borderTopRightRadius	Return the radius of the top right border of an element.
borderTopStyle	Return the top border style of an element.
borderTopWidth	Return the width of the top border of an element.
borderWidth	Return the width of the border element.
boxShadow	Return the drop-shadow of an element.
boxSizing	It is used when fitting elements into their desired position by automatically calculating their dimensions.
captionSide	Return the position of the caption in a table.
clear	Get the position of the specific element relative to floating objects.
clip	Return the visible part of a positioned element.
color	Return the color of the text.
columnCount	That defines the number of columns an element should be divided into.
columnFill	Specifies how to fill a column(balanced or not).
columnGap	Specifies the gap between the columns.
columnRule	Sets the width, style, and color of the rule between columns.
columnRuleColor	Specifies the color of the rule between columns.
columnRuleStyle	Determine the style of rule between columns.
columnRuleWidth	Determine the width of the rule between the columns.
columns	Set the width of the column & column count.
columnSpan	Specify how many columns an element should span across.
counterIncrement	The counter should be incremented on each occurrence of a selector.
counterReset	It is used with the counterincrement property and the content property.
cursor	Return the type of cursor to display for the mouse pointer.
direction	Return the text direction of an element.
display	Return the display type of an element.
emptyCells	It is used to display borders and background for the empty cells.
filter	It is used to add visual effects or filter effects to images.
flex	Returns the length of the item, relative to rest of flexible items inside the same container.
flexBasis	Return the initial length of a flexible item
flexDirection	Return the main-axis direction of the flexible items.
flexFlow	It is used to specify the value for two different properties
flexGrow	An item will grow relative to the rest of the flexible items inside the same container.
flexShrink	Set how the specific item can be shrink in relation to the remaining flexible items within the container.
flexWrap	It is used to determine whether the flexible items should wrap or not.
cssFloat	Returns the horizontal alignment of element.
font	It is used to change the element’s font properties.
fontFamily	Return a list of Font-Family names and generic-family names for text in an element.
fontSize	Get the font size of characters in a word should appear.
fontStyle	Get font style of an element dynamically.
fontVariant	It s used to set the font in capital letters.
fontWeight	Return how thick or thin characters in a word should appear.
fontSizeAdjust	The font size if the first choice of font is not available.
height	It is used to set or get height of an element dynamically.
isolation	Whether an element must necessarily create a new stacking context.
justifyContent	It is used to align the items horizontally when they are not able to use all the available space.
left	It is used for setting or returning the left position of a positioned element.
letterSpacing	It is used to set the space between the characters.
lineHeight	It is used for setting or returning the distance between lines in a text.
listSytle	It is used to set up to three Properties
listStyleImage	Return an image as the list-item icon.
listStylePosition	Returns the position of the list-item marker.
listStyleType	It is used for setting or returning the list-item marker type.
margin	Returns the margin of an element.
marginBottom	Return the bottom margin of an element.
marginLeft	Get the left margin of an element.
marginRight	Return the right margin of an element.
marginTop	Return the top margin of an element.
maxHeight	Return the maximum height of an element.
maxWidth	Return the maximum width of an element.
minHeight	Return the minimum height of an element.
minWidth	Return the minimum width of an element.
objectFit	Return how an image or video element is resized to fit it’s container.
objectPosition	Return how an image or video would be positioned in their own content box.
opacity	It is used to set opacity level for an element.
order	The order of a flexible element relative to the rest of the flexible elements
orphans	The minimum number of lines in a paragraph split on the old page.
outline	Return all outline properties in one declaration.
outlineColor	Returns the color of the outline around an Element.
outlineOffset	It is used for offsetting an outline and draw it beyond the border edge.
outlineStyle	Return the style of the outline around an element.
outlineWidth	Return the width of the outline around an element.
overflow	It is used to specify the behavior of the content when it overflows the element box.
overflowX	Specify the behavior of the content when it overflows an element’s left and right edges.
overflowY	Specify the behavior of the content when it overflows an element’s top and bottom edges
padding	It is used for setting or returning the padding of an element
paddingBottom	It is used for setting or returning the bottom padding of an element.
paddingLeft	It is used for setting or returning the left padding of an element.
paddingRight	It is used for setting or returning the right padding of an element.
paddingTop	It is used for setting or returning the top padding of an element.
pageBreakAfter	Returning the page-break behavior after an element in printing or print preview.
pageBreakBefore	Return the page-break-before characteristics before the specified element in HTML document.
pageBreakInside	Returning the page-break behavior inside an element in printing or print preview.
perspective	It is used to determine how far an element is placed from the Z plane.
perspectiveOrigin	It is used to describe the exact position of a 3D element based on the x and y-axis.
position	Returns the type of positioning method used by the element.
quotes	It is used to represent the HTML < q > element.
resize	It is used to specify whether an element is resizable in height and width by the user.
right	Return the right position of a positioned element including padding, scrollbar, border, and margin.
tableLayout	Return how a table and its cells, rows, and columns should be laid out.
tabSize	Return the length of the space used in place of the tab character.
textAlign	It is pretty much similar to the text-align property in the CSS.
textAlignLast	set the alignment of the last line of the text.
textDecoration	It is used to set one or more decorations for a text.
textDecorationColor	Set the color of the text-decoration like underlines, overlines, etc.
textDecorationLine	It is used to set the decoration for a line
textDecorationStyle	It is used to set the line.
textIndent	It is used for indentation of the first line in each block of text.
textOverflow	It is used to specify the behavior of the text when it overflows the containing element box.
textShadow	It is used to set the shadow effects for text.
textTransform	Return the capitalization of text.
top	Return the top position of a positioned element including padding, scrollbar,etc.
transform	It is used to transform the object. The transform property allows to rotate, scale, move, etc.
transformOrigin	This position is described using co-ordinate geometry using x-axis and y-axis.
transformStyle	Return, the different ways nested elements use for their rendering in 3D space.
transition	It is used to change the appearance of any DIV element.
transitionproperty	Set the name of the CSS property for the transition effect.
transitionDuration	Return the length of time(in seconds or milliseconds) to complete the transition effect.
transitionTimingFunction	Allows a transition effect to change speed over its duration.
transitionDelay	Time in seconds or milliseconds when execution of transition starts.
unicodeBidi	It is used with direction property to determine how multi-directional text is displayed.
userSelect	Return whether the text can be selected by the user or not.
verticalAlign	Return the vertical alignment of the content in an element.
visibility	It is used to set the visibility for an element.
width	Return the width of an element which can be block-level elements or elements with fixed position.
wordBreak	Return the word-break property.
wordSpacing	It is used to set the spacing between words
wordWrap	Return whether long words should be broken to wrap around to the next line.
zIndex	Return the stack order of a positioned element.

Window Object:

Properties	Description
Window closed	Return a value that indicates whether the referred window is closed or not.
defaultStatus	Return the default text in the status bar at the bottom side of the browser.
frameElement	Returns the iframe element in which the window is embedded or stored.
frames	Return the frame element in the form of an array object.
innerHeight	Returning the height of a window’s content area.
innerWidth	Returning the width of a window’s content area.
length	Returning the number of <iframe> elements in the current window.
localStorage	Properties allow you to store value pairs in web browsers using objects.
name	It is used for setting or returning the name of a window.
opener	Return the reference of newly created windows.
outerHeight	It is used for returning the outer height of the browser window.
outerWidth	It is used for returning the outer width of the browser window.
pageXOffset	It is used for returning the pixels of the current document
parent	Returns the parent window of the current window.
screenLeft	Returning the ‘x’ or horizontal coordinate of a window relative to a screen.
screenTop	Returning the ‘y’ or vertical coordinate of a window relative to a screen.
screenX	Returning the ‘x’ or the horizontal coordinates of a window relative to the screen.
screenY	Returning the ‘y’ or the vertical coordinates of a window relative to the screen.
sessionStorage( )	It is used for saving key/value pairs in a web browser.
self	It is used for returning the current window.
status	Return the text in the status bar at the bottom of the browser.
top	Return the topmost browser window of a current window.

Methods	Description
alert( )	It is used to display an alert box.
atob( )	It is used for decoding a base-64 encoded string.
Blur()	Remove focus from the current window.
Focus()	It is used to focus on the new open window.
btoa( )	It is used for encoding a string in base-64 format.
clearTimeout()	Set by the setTimeout()function before that.
clearInterval()	Clears the interval which has been set by the setInterval() function before that.
confirm()	Display a dialog box with an optional message and two buttons, OK and Cancel.
getComputedStyle()	Get all the computed CSS property and values of the specified element.
moveBy()	Moving a window with a specified number of pixels relative to its current coordinates.
moveTo()	It is used in the window to moves the window from the left and top coordinates.
Open()	It is used to open the web pages into a new window or a new tab.
Close	Depends on the browser settings and the values that are assigned to the parameter.
print()	The print() method prints the contents of the current window.
prompt()	Display a dialog box with an optional message prompting the user to input some text.
resizeBy()	Resize a window by the specified amount, relative to its current size.
resizeTo()	Resize a window to the specified width and height.
scrollTo()	Scroll to a particular set of coordinates in the document.
setTimeout()	Executes a function, after waiting a specified number of milliseconds.
setInterval()	Repeats a given function at every given time interval.
stop()	Loading resources in the current browsing context, similar to the browser’s stop button.

Storage Object:

Methods	Description
key()	Return the name of the key with the specified index.
getItem()	It is used to retrieve the storage object which is specified by the user.
setItem()	It is used to set the storage object item which is specified by the user.
removeItem()	It is used to remove the specified storage object item.
clear()	Removes all the Storage Object items for the current domain.

Properties	Description
length	Return the number of items stored in the Storage Object.

Best Practices for HTML DOM

Use getElementById() for Performance: Access elements by their id for faster and more efficient DOM manipulation.
Minimize DOM Manipulation: Batch updates to the DOM to reduce reflows and improve performance.
Avoid Inline JavaScript: Use external JavaScript files to keep code organized and maintainable.
Add Event Listeners Dynamically: Use addEventListener instead of inline event attributes to separate behavior from structure.

Vishal_Khoda

Improve

Article Tags :

HTML DOM Complete Reference

HTML DOM Attribute Object:

Console Object Methods:

Geolocation Object:

History Object:

DOM HTMLCollection:

Location Object

Style object:

Storage Object:

Best Practices for HTML DOM

Explore

HTML Basics

Structure & Elements

Lists

Visuals & Media

Layouts & Designs

Projects & Advanced Topics

Tutorial References

Thank You!

What kind of Experience do you want to share?