JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript HTML DOM Selectors

JavaScript is most commonly used to get or modify the content or value of the HTML elements, as well as to apply some effects.

To do so, you have to find the elements first. There are several ways to do this:

  • Finding HTML element by id
  • Finding HTML elements by tag name
  • Finding HTML elements by class name
  • Finding HTML elements by CSS selectors
  • Finding HTML elements by HTML object collections

Finding HTML Element by Id

You can select an element based on its unique ID with the getElementById() method.

This is the easiest way to find an HTML element in the DOM tree.

The following example selects an element having the ID attribute id="msg":

Run code

If the element is found, the method will return the element as an object.

If the element is not found, myElement will contain null.


Finding HTML Elements by Tag Name

You can also select HTML elements by tag name using the getElementsByTagName() method.

This method returns an array-like list of all elements in the document with the specified Tag name.

This example selects all <p> elements:

Run code

Change the background color of all paragraph elements in the document:

Run code

This example selects the element with id="wrapper", and then selects all <p> elements inside "wrapper":

Run code

Finding HTML Elements by Class Name

You can use the getElementsByClassName() method to select all the elements having specific class names.

This method returns an array-like list of all elements in the document with the specified class name.

This example returns a list of all elements with class="demo":

Run code

Finding HTML Elements by CSS Selectors

You can use the querySelectorAll() method to select elements that matches the specified CSS selector(id, class, types, etc).

This method returns a array-like list of all the elements that matches the specified selectors.

CSS selectors provide a very powerful and efficient way of selecting HTML elements in a document.

Run code

This example returns a list of all <div> elements within the document with a class of "note":

Run code

Finding HTML Elements by HTML Object Collections

The topmost elements in an HTML document are available directly as document properties.

For example, the <html> element can be accessed with document.documentElement property.

The <body> element can be accessed with document.body property.

Run code

Note: If document.body is used before the <body> tag (e.g. inside the <head>), it will return null instead of the body element.

The following HTML objects (and object collections) are also accessible:

Property Description
document.anchors Returns all <a> elements that have a name attribute
document.applets Returns all <applet> elements (Deprecated in HTML5)
document.baseURI Returns the absolute base URI of the document
document.body Returns the <body> element
document.cookie Returns the document's cookie
document.doctype Returns the document's doctype
document.documentElement Returns the <html> element
document.documentMode Returns the mode used by the browser
document.documentURI Returns the URI of the document
document.domain Returns the domain name of the document server
document.domConfig Obsolete. Returns the DOM configuration
document.embeds Returns all <embed> elements
document.forms Returns all <form> elements
document.head Returns the <head> element
document.images Returns all <img> elements
document.implementation Returns the DOM implementation
document.inputEncoding Returns the document's encoding (character set)
document.lastModified Returns the date and time the document was updated
document.links Returns all <area> and <a> elements that have a href attribute
document.readyState Returns the (loading) status of the document
document.referrer Returns the URI of the referrer (the linking document)
document.scripts Returns all <script> elements
document.strictErrorChecking Returns if error checking is enforced
document.title Returns the <title> element
document.URL Returns the complete URL of the document