Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML DOM Complete Reference

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

HTML DOM: The Document Object Model (DOM) is a programming interface for HTML(HyperText Markup Language) and XML(Extensible markup language) documents.

Example:

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>DOM console.count() Method</title>
        <style>
            h1 {
                color:green;
            }
            h2 {
                font-family: Impact;
            }
            body {
                text-align:center;
            }
        </style>
    </head>
    <body>
 
        <h1>GeeksforGeeks</h1>
        <h2>DOM console.count( ) Method</h2>
 
        <p>
        To view the message in the console
        press the F12 key on your keyboard.
        </p>
        <p>
        To count the number of occurrences,
        double click thebutton below:
        </p><br>
        <button ondblclick="count_console()">
        Run Loop
        </button>
 
        <script>
            function count_console() {
                for (i = 0; i < 10; i++) {
                    console.count();
                }
            }
        </script>
    </body>
</html>

Output:

 

 

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
valueReturn 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

activeElementReturn the currently active elements in the HTML document. 
baseURIReturn the base Uniform Resource Identifier (URI) of the document.
body It only returns the content present in the <body> Tag.
cookiecookies 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
designModeIt 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.
domainReturn 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.
headReturn the first occurrence of the head if multiple heads in the document
images CollectionReturn 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.
lastModifiedReturn the date and time of the current document that was last modified. 
readyStateReturn the loading status of the current document. This property is used for read-only. 
referrerReturn the URI of the page that linked to the current page.
strictErrorCheckingReturns 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.
URLReturn 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

anchorsReturn the collection of all <a> element in a HTML document.
appletsReturn a collection of all possible elements available in the HTML
embedsReturn the collection of all embedded elements.
forms Return the collection of all <form> elements in a HTML document.
linksReturn the collection of all <a> and <area> elements with “href” attribute in a HTML document. 
scriptsReturn the collection of all <script> element in HTML document. 

Properties

Description

accessKeyReturn the accesskey attribute of an element.
attributesReturns the group of node attributes specified by NamedNodeMap objects. 
childElementCountIt counts only child element except for text and comment nodes. 
childNodesReturns a node’s child nodes as a nodeList object. 
children Return HTMLcollection of all the child elements of the specified element.
classListReturns the class names of the element in the form of DOMTokenlist(
classNameReturn the value of an element’s class attribute.
clientHeightReturn 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.
clientTopReturn 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
dirReturn the value of dir attribute in an Element.
firstChildReturn the firstchild Node of its parent node element. 
firstElementChildReturn the first child of any node PreRequisites
innerHTMLReturn the HTML content of an element
innerText Returns the text content of a specified node and its descendants. 
isContentEditableReturn 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,
nodeNameReturn the name of the specified node as a string.
nodeTypeFind out the type of the node that we are referring to.
nodeValue Its used to set or get the nodeValue in Any Html document. 
offsetHeightReturns 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. 
offsetParentReturn 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.
scrollWidthIt is used to return the width of an element. 
tagName It is used to return the tagname of the Element.
textContentReturn the text content of the specified node and all its descendants.
titleIt 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:

 

PropertiesDescription
Geolocation coordinatesReturn the position and altitude of the device on Earth. 
Geolocation positionReturn 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 PropertyReturn the count of URLs in the history list of the current browser window.

DOM HTMLCollection:

Properties

Description

lengthReturn 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

hashReturn the anchor part of a URL. 
hostReturns the hostname and port of a URL.
hostnameReturn the hostname of the current URL.
hrefReturn the complete URL of the current page.
originReturn the protocol, hostname, and port number of a URL. 
pathnameReturns a string that represents the pathname of the URL.
portSets the port number of the current URL. 
protocolReturn the protocol or set the protocol of the current URL. 
SearchSet 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

appCodeNameReturning the code name of the browser. 
appNameIt is used for returning the name of the browser.
appVersionReturns a string that represents the version information of the browser. 
cookieEnabledIt returns true if cookies are enabled else it returns false. 
geolocationReturn a geolocation object by the browser which can be used to locate a user’s position. 
languageIt is used for returning the browser’s language version. 
onLineReturn  Boolean value which specifies whether a browser is in the online or offline mode. 
platformReturn the platform for which the browser is compiled. 
productReturn the browser’s engine(product) name. 
userAgentIt 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

availHeightIt is used for returning the height of the user’s screen, in pixels.
availWidthIt is used for returning the width of the user’s screen, in pixels.
colorDepthReturn the bit depth of the color palette for displaying images, in bits per pixel.
heightIt is used for returning the total height of a user’s screen.
pixelDepthIt  is used for returning the color resolution of the visitor’s screen.
widthIt is used for returning the total width of a user’s screen. 

Style object:

Properties

Description

alignContentIt is used to align the items of a flexible container 
alignItemsReturn the default alignment of items in a flexible container. 
alignSelfReturn the alignment for a selected item inside a flexible container
animationTo animate transitions from one CSS style to another CSS style
animationDelayReturns the delay after which the animation should start. 
animationDirectionReturn the animation direction.
animationDurationTo set the time interval to complete one cycle of an animation. 
animationFillModeThe animation is not playing or when an animation is finished or when there is a delay in animation
animationIterationCountReturn how many times an animation should be played. 
animationNameReturns a name for @keyframes animation. 
animationTimingFunctionThe time of transition between the styles to make transitions smooth. 
animationPlayStateIt is used to specify whether an animation is running or paused. 
backgroundReturn the background of an element.
backgroundAttachmentReturn whether the background image should be fixed or scroll with the content. 
backgroundColorReturn the background-color of an element.
backgroundImageReturn the background image of an element. 
backgroundPositionReturn position of the background-image in an element. 
backgroundRepeatHTML DOM is used to set or return the CSS
backgroundClipReturn the painting area of the background.
backgroundOriginThe background image is relative to in position. 
backgroundSizeReturn the size of the background image. 
backfaceVisibilityElement visible or invisible when the element is not facing the screen.
borderIt  is used to sets or returns the style of an element’s border.
borderBottomStyleReturns the three different border-bottom property such as border-bottom-width,etc.
borderBottomColorReturn the color of bottom border of an element.
borderBottomLeftRadiusReturn the radius of the border of the bottom-left corner.
borderBottomRightRadiusSet the style of the radius of the bottom-right corner of its border. 
borderBottomReturn the style of the bottom border of an element. 
borderBottomWidthReturn the width of bottom border of an element. 
borderCollapseReturns the border of the table collapsed into a single border or not. 
borderColorSpecifies the color of the element’s border. 
borderImageIt is used for setting the borderImageSource, borderImageSlice,etc.
borderImageOutsetThe border, image is to be painted is called the border-image space.
borderImageRepeatReturn the borderImageRepeat property.
borderImageSliceSpecify the value of this property in terms of percentage, number or global values.
borderImageSourceReturn the image to be used instead of the styles given by the border-style property. 
borderImageWidthReturn the width of the border image. 
borderLeftIt is used to set or returns the three different 
borderLeftColorGet the color to left border of element. 
borderLeftStyleSet or return the left border style of an element. 
borderLeftWidthReturn the width of the left border of an element.
borderRadiusReturn the four different borderRadius
borderRightReturns the three different border-right property
borderRightColorReturn the style of right border of an element. 
borderRightWidthReturn the width of the right border of an element. 
borderSpacingReturn the spacing between the cells in a table. 
borderStyleReturn the border style of an element.
borderTopReturns the three different border-top property 
borderTopColorGet the color of top border of element. 
borderTopLeftRadiusReturn the radius of the top left border of an element. 
borderTopRightRadiusReturn the radius of the top right border of an element. 
borderTopStyleReturn the top border style of an element. 
borderTopWidthReturn the width of the top border of an element. 
borderWidthReturn the width of the border element.
boxShadowReturn the drop-shadow of an element. 
boxSizingIt is used when fitting elements into their desired position by automatically calculating their dimensions.
captionSideReturn the position of the caption in a table. 
clearGet the position of the specific element relative to floating objects.
clipReturn the visible part of a positioned element. 
colorReturn the color of the text.
columnCountThat defines the number of columns an element should be divided into.
columnFillSpecifies how to fill a column(balanced or not).
columnGapSpecifies the gap between the columns.
columnRuleSets the width, style, and color of the rule between columns.
columnRuleColorSpecifies the color of the rule between columns.
columnRuleStyleDetermine the style of rule between columns.
columnRuleWidthDetermine the width of the rule between the columns.
columnsSet the width of the column & column count.
columnSpanSpecify how many columns an element should span across.
counterIncrementThe counter should be incremented on each occurrence of a selector.
counterResetIt  is used with the counterincrement property and the content property.
cursorReturn the type of cursor to display for the mouse pointer. 
directionReturn the text direction of an element. 
displayReturn the display type of an element. 
emptyCellsIt is used to display borders and background for the empty cells. 
filterIt is used to add visual effects or filter effects to images. 
flexReturns the length of the item, relative to rest of flexible items inside the same container. 
flexBasisReturn the initial length of a flexible item
flexDirectionReturn the main-axis direction of the flexible items. 
flexFlowIt is used to specify the value for two different properties
flexGrowAn item will grow relative to the rest of the flexible items inside the same container. 
flexShrinkSet how the specific item can be shrink in relation to the remaining flexible items within the container. 
flexWrapIt is used to determine whether the flexible items should wrap or not. 
cssFloatReturns the horizontal alignment of element.
font It is used to change the element’s font properties.
fontFamilyReturn a list of Font-Family names and generic-family names for text in an element. 
fontSizeGet the font size of characters in a word should appear. 
fontStyleGet font style of an element dynamically.
fontVariantIt s used to set the font in capital letters.
fontWeightReturn how thick or thin characters in a word should appear. 
fontSizeAdjustThe font size if the first choice of font is not available. 
heightIt is used to set or get height of an element dynamically.
isolationWhether an element must necessarily create a new stacking context. 
justifyContentIt is used to align the items horizontally when they are not able to use all the available space. 
leftIt is used for setting or returning the left position of a positioned element.
letterSpacingIt is used to set the space between the characters.
lineHeightIt is used for setting or returning the distance between lines in a text. 
listSytleIt is used to set up to three Properties 
listStyleImageReturn an image as the list-item icon. 
listStylePositionReturns the position of the list-item marker.
listStyleTypeIt is used for setting or returning the list-item marker type. 
marginReturns the margin of an element.
marginBottomReturn the bottom margin of an element. 
marginLeftGet the left margin of an element. 
marginRightReturn the right margin of an element. 
marginTopReturn the top margin of an element. 
maxHeightReturn the maximum height of an element. 
maxWidthReturn the maximum width of an element.
minHeightReturn the minimum height of an element.
minWidthReturn the minimum width of an element.
objectFitReturn how an image or video element is resized to fit it’s container.
objectPositionReturn how an image or video would be positioned in their own content box. 
opacityIt is used to set opacity level for an element. 
orderThe order of a flexible element relative to the rest of the flexible elements
orphansThe minimum number of lines in a paragraph split on the old page.
outlineReturn all outline properties in one declaration. 
outlineColorReturns the color of the outline around an Element. 
outlineOffsetIt  is used for offsetting an outline and draw it beyond the border edge. 
outlineStyleReturn the style of the outline around an element. 
outlineWidthReturn the width of the outline around an element. 
overflowIt is used to specify the behavior of the content when it overflows the element box.
overflowXSpecify the behavior of the content when it overflows an element’s left and right edges.
overflowYSpecify the behavior of the content when it overflows an element’s top and bottom edges
paddingIt is used for setting or returning the padding of an element
paddingBottomIt is used for setting or returning the bottom padding of an element. 
paddingLeftIt  is used for setting or returning the left padding of an element. 
paddingRightIt is used for setting or returning the right padding of an element.
paddingTopIt is used for setting or returning the top padding of an element.
pageBreakAfterReturning the page-break behavior after an element in printing or print preview. 
pageBreakBeforeReturn the page-break-before characteristics before the specified element in HTML document.
pageBreakInsideReturning the page-break behavior inside an element in printing or print preview. 
perspectiveIt is used to determine how far an element is placed from the Z plane.
perspectiveOriginIt is used to describe the exact position of a 3D element based on the x and y-axis.
positionReturns the type of positioning method used by the element.
quotesIt is used to represent the HTML < q > element.
resizeIt is used to specify whether an element is resizable in height and width by the user. 
rightReturn the right position of a positioned element including padding, scrollbar, border, and margin. 
tableLayoutReturn how a table and its cells, rows, and columns should be laid out. 
tabSizeReturn the length of the space used in place of the tab character.
textAlignIt is pretty much similar to the text-align property in the CSS.
textAlignLastset the alignment of the last line of the text.
textDecorationIt is used to set one or more decorations for a text.
textDecorationColorSet the color of the text-decoration like underlines, overlines, etc.
textDecorationLineIt is used to set the decoration for a line
textDecorationIt is used to set the line.
textIndentIt is used for indentation of the first line in each block of text. 
textOverflowIt is used to specify the behavior of the text when it overflows the containing element box. 
textShadowIt is used to set the shadow effects for text. 
textTransformReturn the capitalization of text.
topReturn the top position of a positioned element including padding, scrollbar,etc.
transformIt is used to transform the object. The transform property allows to rotate, scale, move, etc.
transformOriginThis position is described using co-ordinate geometry using x-axis and y-axis. 
transformReturn, the different ways nested elements use for their rendering in 3D space.
transitionIt is used to change the appearance of any DIV element. 
transitionpropertySet the name of the CSS property for the transition effect. 
transitionDurationReturn the length of time(in seconds or milliseconds) to complete the transition effect. 
transitionTimingFunctionAllows a transition effect to change speed over its duration. 
transitionDelayTime in seconds or milliseconds when execution of transition starts. 
unicodeBidiIt is used with direction property to determine how multi-directional text is displayed.
userSelectReturn whether the text can be selected by the user or not.
verticalAlignReturn the vertical alignment of the content in an element. 
visibilityIt is used to set the visibility for an element. 
widthReturn the width of an element which can be block-level elements or elements with fixed position. 
wordBreakReturn the word-break property. 
wordSpacingIt is used to set the spacing between words
wordWrapReturn whether long words should be broken to wrap around to the next line.
zIndexReturn the stack order of a positioned element.

Window Object:

 

Properties

Description

Window closedReturn a value that indicates whether the referred window is closed or not.
defaultStatusReturn the default text in the status bar at the bottom side of the browser.
frameElementReturns the iframe element in which the window is embedded or stored.
framesReturn the frame element in the form of an array object.
innerHeightReturning the height of a window’s content area. 
innerWidthReturning the width of a window’s content area.
lengthReturning the number of <iframe> elements in the current window. 
localStorageProperties allow you to store value pairs in web browsers using objects.
nameIt is used for setting or returning the name of a window. 
openerReturn the reference of newly created windows.
outerHeightIt is used for returning the outer height of the browser window. 
outerWidthIt is used for returning the outer width of the browser window. 
pageXOffsetIt is used for returning the pixels of the current document 
parentReturns the parent window of the current window. 
screenLeftReturning the ‘x’ or horizontal coordinate of a window relative to a screen. 
screenTopReturning the ‘y’ or vertical coordinate of a window relative to a screen. 
screenXReturning the ‘x’ or the horizontal coordinates of a window relative to the screen. 
screenYReturning 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. 
selfIt is used for returning the current window. 
statusReturn the text in the status bar at the bottom of the browser. 
topReturn 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. 
CloseDepends 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. 
Window 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

lengthReturn the number of items stored in the Storage Object.

My Personal Notes arrow_drop_up
Last Updated : 09 Feb, 2023
Like Article
Save Article
Similar Reads
Related Tutorials