DONATE  
MENU
HTML
JAVASCRIPT
AJAX
JSON

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Html / Js Dom » Accessing HTML Elements in DOM
Share Tweet WhatsApp

Accessing HTML Elements in DOM

On this page, we shall get familiarized with the various methods of the document object that can be used in accessing an HTML element(s) on a webpage. getElementById(element id) The getElementById() is a method of the document object that can be used in accessing an element by its distinct id (identity) on a webpage. It's parameter is the unique id of the element on the webpage.
document.getElementById("myElementId"); //gets element with the id in its parameter

var myEl = document.getElementById("myEl"); //gets the element with id "myEl" and stores its object on a variable. The variable thereafter carries that element object
<!-- The element with id "myh1" -->
<h1 id='myh1'>Hello World</h1>

<!-- BUTTON -->
<button onclick='change()'>CHANGE</button>

<script>
function change(){
var h1 = document.getElementById("myh1"); //getting the element
h1.innerHTML = "How is the world today?"; //Using a property of the element's object
}
</script>

Copy PRACTICE IT

If more than one element have the same id, the first element becomes the valid and JS recognized owner of that id
<!-- The two heading elements below have same id -->
<h1 id='myh1'>My Webpage</h1>
<h1 id='myh1'>Hello World</h1>

<button onclick='change()'>CHANGE</button>

<script>
function change(){
document.getElementById("myh1").innerHTML = "How is the world today?";
}
</script>

Copy PRACTICE IT

getElementsByClassName(class name) The getElementsByClassName() returns an array of all elements having the same class name on a webpage. Since it is an array, we therefore need to access or loop through the individual elements to achieve what we want. The first element with the class name have an index number of 0, followed by the second element and so on.
<h1 class='myh1'>My Webpage</h1>
<h1 class='myh1'>Hello World</h1>

<button onclick='change()'>CHANGE</button>

<script>
function change(){
var myh1_arr = document.getElementsByClassName("myh1");
myh1_arr[0].innerHTML = "My Dynamic Webpage";
myh1_arr[1].innerHTML = "How is the world today?";
}
</script>

Copy PRACTICE IT

getElementsByTagName(tag name) The getElementsByTagName() method is used in accessing all elements defined with a particular tag on a webpage. For example, getting all elements with the <p> tag. Just like the getElementsByClassName(), it returns an array containing the individual elements defined with that tag name on a webpage. It is left for us to loop or individually access such elements to achieve whatever we want.
<h1>My Webpage</h1>
<h1>Hello World</h1>
<h1>How is the world today?</h1>
<p>I love JS</p>
<button onclick='change()'>CHANGE</button>

<script>
function change(){
var myh1_arr = document.getElementsByTagName("h1");
var len = myh1_arr.length;

for (var i=0; i<len; i++){
myh1_arr[i].innerHTML = "This is an h1 element";
}
}
</script>

Copy PRACTICE IT

getElementsByName(name) The getElementsByName() returns an array of elements having same value for the HTML name attribute. One of the great use of this is in deciding what was the option of a user among a group of radio buttons' options.
<h1>Rate Us Today!</h1>
<div><p><b>Are you enjoying stackbeginner.com</b></p><input onclick='rate()' type='radio' value='Yes' name='enjoy'/>Yes<br/>
<input onclick='rate()' type='radio' value='No' name='enjoy'/>No<br/>
<input onclick='rate()' type='radio' value='Undecided' name='enjoy'/>Undecided</div>

<script>
function rate(){
var rate_arr = document.getElementsByName("enjoy");
var len = rate_arr.length;

for (var i=0; i<len; i++){
if (rate_arr[i].checked){
alert("You said: "+rate_arr[i].value);
}
}
}
</script>

Copy PRACTICE IT

querySelector(selector) AND querySelectorAll(selector) The querySelector() method is used in getting an element based on CSS standard of selecting an element for styling. "#element_id" is a standard CSS selector for selecting an element with an id "element_id" for styling. On the other hand, the querySelectorAll() is used when the elements can be more than one e.g getting elements with same class name (more than one element can have same class name). The querySelectorAll() will return an array. Therefore, we use the querySelector() to get a web page element and the querySelectorAll() to get a web page elements based on CSS standard selection syntaxes.
querySelector("#myp"); //gets element with id "myp"
querySelectorAll(".btns"); //gets all elements with a "btns" class
querySelectorAll("p"); //gets all elements defined with the <p> tag
querySelector()
<h1 id='h'>Stack Beginner</h1>
<p><button onclick='grow()'>GROW</button></p>

<script>
function grow(){
document.querySelector("#h").innerHTML = "Stack Developer";
}
</script>

Copy PRACTICE IT

querySelectorAll()
<h1>My Webpage</h1>
<h1>Hello World</h1>
<h1>How is the world today?</h1>
<p>I love JS</p>
<button onclick='change()'>CHANGE</button>

<script>
function change(){
var myh1_arr = document.querySelectorAll("h1");
var len = myh1_arr.length;

for (var i=0; i<len; i++){
myh1_arr[i].innerHTML = "This is an h1 element";
}
}
</script>

Copy PRACTICE IT

NOTE:
  • You may decide to use the querySelectorAll() at all times e.g getting an element with an id but then, you must remember that it will return an array of the element(s).
    <h1 id='h'>Stack Beginner</h1>
    <p><button onclick='grow()'>GROW</button></p>
    
    <script>
    function grow(){
    var el = document.querySelectorAll("#h");
    el[0].innerHTML = "Stack Developer";
    }
    </script>

    Copy PRACTICE IT

SUMMARY
  1. Using the document object, we can access just any element on our webpage because all elements on a webpage have an object in the document object.
  2. The document.getElementById() helps get an element using its id.
  3. The document.getElementsByClass() helps get elements belonging to same class.
  4. The document.getElementsByTagName() helps get elements declared with same tag.
  5. The document.getElementsByName() helps get elements having same value for their name attribute.
  6. The document.querySelector() helps get an element just the way we get an element for styling in CSS.
  7. The document.querySelectorAll() helps get elements just the way we get elements for styling in CSS.
Take a short quiz on Accessing HTML Elements in DOM.
Ask a question or tell us if Accessing HTML Elements in DOM is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode