Explain various type of HTML DOM methods
Now coming to the HTML DOM methods, there are six different methods in which users can
access or manipulate HTML elements using JavaScript:
HTML DOM getElementById() Method
HTML DOM getElementsByClassName() Method
HTML DOM getElementsByName() Method
HTML DOM getElementsByTagName() Method
HTML DOM querySelector() Method
HTML DOM querySelectorAll() Method
HTML DOM getElementById(): This method is used when developers have defined certain
HTML elements with IDs that uniquely identify the same elements in the whole document. It
returns an Element object which matches the specified ID in the method. If the ID does not exist
in the document, it simply returns null.
Syntax:
[Link](id);
Parameter: It has a single parameter as mentioned above and described below:
id: The ID of the element to locate in the HTML document. It should be a case-sensitive
string.
Return value: It returns the object corresponding to the passed ID in the method, or null if no
match is found.
HTML DOM getElementsByClassName(): This method is used when there are multiple
HTML elements with the same class name. It returns a collection of all objects which match the
specified class in the method.
Syntax:
[Link](className);
Parameter: It has a single parameter as mentioned above and described below:
className: The class name of the element(s) to locate in the HTML document. It should
be a case-sensitive string.
Return value: It returns a collection of objects corresponding to the passed class name in the
method.
HTML DOM getElementsByName(): In Javascript, getElementsByName() returns
a NodeList of objects which match a particular name attribute in the HTML document.
Syntax:
[Link](nameAttribute);
Parameter: It has a single parameter as mentioned above and described below:
nameAttribute: The name attribute of the element(s) to locate in the HTML document. It
should be a case-sensitive string.
Return value: It returns a NodeList of objects corresponding to the passed name attribute in
the method.
HTML DOM getElementsByTagName(): The getElementsByTagName() returns
a HTMLCollection of objects which match a tag name in the HTML document.
Syntax:
[Link](tagName);
Parameter: It has a single parameter as mentioned above and described below:
tagName: The tag name of the element(s) to locate in the HTML document. It should be
a case-sensitive string.
Return value: It returns an HTMLCollection of objects corresponding to the passed tag name
in the method.
HTML DOM querySelector(): This method returns the first match of an element that is found
within the HTML document with the specific selector. If there is no match, null is returned.
Syntax:
[Link](selector);
Parameter: It has a single parameter as mentioned above and described below:
selector: A string containing one or more selectors to match elements located in the
HTML document.
Return value: It returns the first occurrence of the object corresponding to the passed selector in
the method.
HTML DOM querySelectorAll(): This method returns a static NodeList of all elements that
are found within the HTML document with the specific selector.
Syntax:
[Link](selector);
Parameter: It has a single parameter as mentioned above and described below:
selector: A string containing one or more selectors to match elements located in the
HTML document.
Return value: It returns a NodeList of the objects corresponding to the passed selector in the
method.
Document Object Properties and Methods
The following properties and methods can be used on HTML documents:
Property / Method Description
activeElement Returns the currently focused element in the document
addEventListener() Attaches an event handler to the document
adoptNode() Adopts a node from another document
anchors Deprecated
applets Deprecated
baseURI Returns the absolute base URI of a document
body Sets or returns the document's body (the <body> element)
charset Deprecated
characterSet Returns the character encoding for the document
close() Closes the output stream previously opened with [Link]()
cookie Returns all name/value pairs of cookies in the document
createAttribute() Creates an attribute node
createComment() Creates a Comment node with the specified text
createDocumentFragment() Creates an empty DocumentFragment node
createElement() Creates an Element node
createEvent() Creates a new event
createTextNode() Creates a Text node
defaultView Returns the window object associated with a document, or null if none is ava
designMode Controls whether the entire document should be editable or not.
doctype Returns the Document Type Declaration associated with the document
documentElement Returns the Document Element of the document (the <html> element)
documentMode Deprecated
documentURI Sets or returns the location of the document
domain Returns the domain name of the server that loaded the document
domConfig Deprecated
embeds Returns a collection of all <embed> elements the document
execCommand() Deprecated
forms Returns a collection of all <form> elements in the document
getElementById() Returns the element that has the ID attribute with the specified value
getElementsByClassName() Returns an HTMLCollection containing all elements with the specified class
getElementsByName() Returns an live NodeList containing all elements with the specified name
getElementsByTagName() Returns an HTMLCollection containing all elements with the specified tag n
hasFocus() Returns a Boolean value indicating whether the document has focus
head Returns the <head> element of the document
images Returns a collection of all <img> elements in the document
implementation Returns the DOMImplementation object that handles this document
importNode() Imports a node from another document
inputEncoding Deprecated
lastModified Returns the date and time the document was last modified
links Returns a collection of all <a> and <area> elements in the document that ha
attribute
normalize() Removes empty Text nodes, and joins adjacent nodes
normalizeDocument() Deprecated
open() Opens an HTML output stream to collect output from [Link]()
querySelector() Returns the first element that matches a specified CSS selector(s) in the doc
querySelectorAll() Returns a static NodeList containing all elements that matches a specified C
the document
readyState Returns the (loading) status of the document
referrer Returns the URL of the document that loaded the current document
removeEventListener() Removes an event handler from the document (that has been attached with
the addEventListener() method)
renameNode() Deprecated
scripts Returns a collection of <script> elements in the document
strictErrorChecking Deprecated
title Sets or returns the title of the document
URL Returns the full URL of the HTML document
write() Writes HTML expressions or JavaScript code to a document
writeln() Same as write(), but adds a newline character after each statement