JavaScript HTML DOM Elements

## JS Basic

JS HOME JS Introduction JS How To JS Output JS Statements JS Comments JS Variables JS Data Types JS Objects JS Functions JS Operators JS Comparisons JS Conditions JS Switch JS Loop For JS Loop While JS Breaks JS Errors JS Validation

## JS Advanced

JS Object JS Number JS String JS Date JS Array JS Boolean JS Math JS RegExp

## JS HTML DOM

DOM Intro DOM Methods DOM Document DOM Elements DOM HTML DOM CSS DOM Events DOM Navigation DOM Nodes DOM Nodelist

## JS Browser BOM

JS Window JS Screen JS Location JS History JS Navigator JS PopupAlert JS Timing JS Cookies

## JS Libraries

JS Libraries JS jQuery JS Prototype

## JS Examples

JS Basic Examples JS Objects Examples JS DOM Examples JS HTML Examples JS Browser Examples JS Quiz JS Certificate JS Summary

## JS References

Javascript Objects HTML DOM Objects

# JavaScript HTML DOM Elements

« Previous
Next Chapter »

This page teaches you how to find and access HTML elements in an HTML page.

## Finding HTML Elements

Often, with JavaScript, you want to manipulate HTML elements.

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

- Finding HTML elements by id
- Finding HTML elements by tag name
- Finding HTML elements by class name
- Finding HTML elements by HTML object collections

## Finding HTML Elements by Id

The easiest way to find HTML elements in the DOM, is by using the element id.

This example finds the element with id="intro":

## Example

var x=document.getElementById("intro");
Try it yourself »

If the element is found, the method will return the element as an object (in x).

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

## Finding HTML Elements by Tag Name

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

## Example

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
Try it yourself »

## Finding HTML Elements by Class Name

If you want to find all HTML elements with the same class name. Use this method:

document.getElementsByClassName("intro");

The example above returns a list of all elements with class="intro".

| Finding elements by class name does not work in Internet Explorer 5,6,7, and 8.

## Finding HTML Elements by HTML Object Collections

This example finds the form element with id="frm", in the forms collection, and displays all element values:

## Example

var x=document.forms["frm1"];
for (var i=0;i<x.length;i++)
{
document.write(x.elements[i].value);
document.write("<br>");
}
Try it yourself »

The following HTML object collections are accesible:

- document.anchors
- document.forms
- document.images
- document.links

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE