HTML5 Selectors API

 HTML5 makes it easier to find HTML5 elements on the page or within your DOM structure. List of available calls and Descriptions with the examples are listed below.

First, you can get element by referencing its DOM id. This is done with the help of function called:

getElementById()  

It returns  the element by its ID. Example of this function call is

<div id="myId">

 
getElementById("myId");

Another function call is somewhat similar to first, but instead of ID it looks for DOM element by name. AS a result, it is called:

 getElementsByName()

Returns elements of the page where name is specified as this function argument

<input  type="text" name="myId">


getElementsByName("myId");

Finally, you can find and return element by its tag ame. getElementsByTagName()

Return all elements whose tag name matches the specified value

<input type="text">


getElementsByTagName("input"); There are other selectors worth mentioning. They are called QuerySelectors. There are two of them. First is called querySelector() and another querySelectorAll(). First query selector returns first element which is found based on the search criteria and second is used to return all instances of the items matching its search criteria.

Example: var x = document.querySelector(".myClass")  //returns first instance of the item with style called .myClass applied against it.

Featured pages

Overview

Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …

Tags

Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…

Welcome

 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …