HTML DOM Complete Reference

Last Updated : 30 Dec, 2024

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	Example
getNamedItem()	Return the attribute node from the NamedNodeMap object.	Try
item()	Return the node to the specified index.	Try
removeNamedItem()	Remove the node with the specified name in a named node object.	Try

Properties:

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

Console Object Methods:

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

Document Object Properties:

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

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

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

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

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

Geolocation Object:

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

History Object:

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

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

DOM HTMLCollection:

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

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

Location Object

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

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

The Navigator Object:

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

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

Screen Object:

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

Style object:

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

Window Object:

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

Methods	Description	Example
alert( )	It is used to display an alert box.	Try
atob( )	It is used for decoding a base-64 encoded string.	Try
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.	Try
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.	Try
moveTo()	It is used in the window to moves the window from the left and top coordinates.	Try
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.	Try
resizeTo()	Resize a window to the specified width and height.	Try
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.	Try

Storage Object:

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

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

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.

HTML DOM Complete Reference – FAQs

What is the HTML DOM?

The HTML DOM is a programming interface that represents the structure of an HTML document, allowing developers to interact with elements dynamically using JavaScript.

How do I access an HTML element using the DOM?

Use methods like document.getElementById(), document.querySelector(), or document.getElementsByClassName().

What is the difference between innerHTML and textContent?

innerHTML retrieves or sets HTML content, while textContent works only with plain text.

Can I add new elements to the DOM dynamically?

Yes, use methods like createElement() and appendChild() to add elements to the DOM.

What is event delegation in the DOM?

Event delegation allows you to add an event listener to a parent element to handle events on its child elements, improving performance.

HTML DOM Audio/Video Complete Reference

Vishal_Khoda

Improve

Article Tags :