Search within TutorialsPark

Javascript DOM: HTML Elements Objects


To Obtain HTML elements using the Javascript DOM.


Javascript DOM : HTML Element Objects

The most common utility of DOM is to get hold of and manipulate objects that represent certain elements in the document.

Javascript DOM properties are used to return objects that represent certain types of elements

And a set of methods are used to match elements using search queries, and even Navigate through the DOM tree .

Table : JavaScript DOM : HTML Element Objects Properties and Methods

Property Description Returns
activeElement To Return Objects that represents the currently focused element HTMLElement
body To return objects that represents the body element HTMLElement
embeds plugin To Return objects that represents all the embed elements HTMLCollection
forms To Return objects that represents all the form elements HTMLCollection
head To Return an object that represents the <head> elements HTMLHeadElement
images To Return objects that represents all the <img> elements HTMLCollection
links To Return objects that represents all the <a> and <area> elements with href attribute HTMLCollection
scripts To Return objects that represents all the <script> elements HTMLCollection

Example: Javascript DOM - HTMLCollection Objects

Give it a TRY! » Note: The document.images property is used to get an HTMLCollection containing object representing all <img> element


Javascript DOM : Obtaining Element using Array Notation

An object representing a named element can be obtained using an array styled notation, but the element must have a name or id attribute value.

The browser begins searching for all elements in the document in a depth-first order whose id or name attribute matches to the value specified in the query.

As soon as a match is found the search is terminated, and an HTMLElement representing the matched element is returned.

Example: Javascript DOM - Location Object

Give it a TRY! » Note: The document.images property is used to get an HTMLCollection containing object representing all <img> element


Javascript DOM : Search Elements

The Javascript DOM defines a set of methods that are used to search for element in the document.

Some of the methods returns multiple elements also called as NodeList , which is a part of the underliying DOM specification that deals with generic structured Document formats.

To navigate outside the current document, use the properties of the Location object , this is done through the use of property href or the methods like assign and replace

Table : Search Element

Property Description Returns
getElementById(<id>) To return the element with the specified id value HTMLElement
getElementByClassName(<class>) To return the element with the specified class value HTMLElement[]
getElementByName(<tag>) To return the element with the specified name value HTMLElement[]
getElementByTagName(<tag>) To return the element of the specified type HTMLElement[]
querySelector(<selector>) To return the first element that matches the specified CSS selector HTMLElement
querySelectorAll(<selector>) To Return all the elements that match the specified CSS selector HTMLElement[]

Example: Javascript DOM using document.getElement* Method

Give it a TRY! » Note: The document.images property is used to get an HTMLCollection containing object representing all <img> element


Javascript DOM : Search using CSS Selectors

A broad range of elements in the document can be selected using CSS selectors

In the below demo, the selector searches for all p elements and img elements with id value of vehicle.

Example: Javascript DOM : Search using CSS Selectors

Give it a TRY! » Note: The selector querySelectorAll() can select multiple elements.


Javascript DOM: Chaining Multiple Searches Together

An intresting aspect of DOM is that expect one all other search methods of Document object implements can also be implemented by HTMLElement Objects

The only exception to this rule is the method getElementById , which can be used only via the Document Object.

Example: Javascript DOM - Chaining Multipe Searches Together

Give it a TRY! » Note: The first two searches are Chained Searches