- JavaScript Basics
- JS Home
- JS Syntax
- JS Placements
- JS Output
- JS Statements
- JS Keywords
- JS Comments
- JS Variables
- JS var
- JS let
- JS const
- JS var Vs let Vs const
- JS Operators
- JS Arithmetic Operators
- JS Assignment Operators
- JS Comparison Operators
- JS Logical Operators
- JS Bitwise Operators
- JS Ternary Operator
- JS Operator Precedence
- JS Data Types
- JS typeof
- JS Conditional Statements
- JS Conditional Statement
- JS if Statement
- JS if...else Statement
- JS switch Statement
- JS Loops
- JS for Loop
- JS while Loop
- JS do...while Loop
- JS break Statement
- JS continue Statement
- JS break Vs. continue
- JavaScript Popup Boxes
- JS Dialog Box
- JS alert Box
- JS confirm Box
- JS prompt Box
- JavaScript Functions
- JS Functions
- JS setTimeout() Method
- JS setInterval() Method
- JavaScript Events
- JS Events
- JS onclick Event
- JS onload Event
- JS Mouse Events
- JS onreset Event
- JS onsubmit Event
- JavaScript Arrays
- JS Array
- JS Find Length of Array
- JS Add Elements at Beginning
- JS Add Element at End
- JS Remove First Element
- JS Remove Last Element
- JS Get First Index
- JS Get Last Index
- JS Reverse an Array
- JS Sort an Array
- JS Concatenate Arrays
- JS join()
- JS toString()
- JS from()
- JS Check if Value Exists
- JS Check if Array
- JS Slice an Array
- JS splice()
- JS find()
- JS findIndex()
- JS entries()
- JS every()
- JS fill()
- JS filter()
- JS forEach()
- JS map()
- JavaScript Strings
- JS String
- JS Length of String
- JS Convert to Lowercase
- JS Convert to Uppercase
- JS String Concatenation
- JS search()
- JS indexOf()
- JS search() Vs. indexOf()
- JS match()
- JS match() Vs. search()
- JS replace()
- JS toString()
- JS String()
- JS includes()
- JS substr()
- JS Slice String
- JS charAt()
- JS repeat()
- JS split()
- JS charCodeAt()
- JS fromCharCode()
- JS startsWith()
- JS endsWith()
- JS trim()
- JS lastIndexOf()
- JavaScript Objects
- JS Objects
- JS Boolean Object
- JavaScript Math/Number
- JS Math Object
- JS Math.abs()
- JS Math.max()
- JS Math.min()
- JS Math.pow()
- JS Math.sqrt()
- JS Math.cbrt()
- JS Math.round()
- JS Math.ceil()
- JS Math.floor()
- JS Math.trunc
- JS toFixed()
- JS toPrecision()
- JS Math.random()
- JS Math.sign()
- JS Number.isInteger()
- JS NaN
- JS Number()
- JS parseInt()
- JS parseFloat()
- JavaScript Date and Time
- JS Date and Time
- JS Date()
- JS getFullYear()
- JS getMonth()
- JS getDate()
- JS getDay()
- JS getHours()
- JS getMinutes()
- JS getSeconds()
- JS getMilliseconds()
- JS getTime()
- JS getUTCFullYear()
- JS getUTCMonth()
- JS getUTCDate()
- JS getUTCDay()
- JS getUTCHours()
- JS getUTCMinutes()
- JS getUTCSeconds()
- JS getUTCMilliseconds()
- JS toDateString()
- JS toLocaleDateString()
- JS toLocaleTimeString()
- JS toLocaleString()
- JS toUTCString()
- JS getTimezoneOffset()
- JS toISOString()
- JavaScript Browser Objects
- JS Browser Objects
- JS Window Object
- JS Navigator Object
- JS History Object
- JS Screen Object
- JS Location Object
- JavaScript Document Object
- JS Document Object Collection
- JS Document Object Properties
- JS Document Object Methods
- JS Document Object with Forms
- JavaScript DOM
- JS DOM
- JS DOM Nodes
- JS DOM Levels
- JS DOM Interfaces
- JavaScript Cookies
- JS Cookies
- JS Create/Delete Cookies
- JavaScript Regular Expression
- JS Regular Expression
- JS RegEx .
- JS RegEx \w and \W
- JS RegEx \d and \D
- JS RegEx \s and \S
- JS RegEx \b and \B
- JS RegEx \0
- JS RegEx \n
- JS RegEx \xxx
- JS RegEx \xdd
- JS RegEx Quantifiers
- JS RegEx test()
- JS RegEx lastIndex
- JS RegEx source
- JavaScript Advance
- JS Page Redirection
- JS Form Validation
- JS Validations
- JS Error Handling
- JS Exception Handling
- JS try-catch throw finally
- JS onerror Event
- JS Multimedia
- JS Animation
- JS Image Map
- JS Debugging
- JS Browser Detection
- JS Security
- JavaScript Misc
- JS innerHTML
- JS getElementById()
- JS getElementsByClassName()
- JS getElementsByName()
- JS getElementsByTagName()
- JS querySelector()
- JS querySelectorAll()
- JS document.write()
- JS console.log()
- JS instanceof
- JavaScript Programs
- JavaScript Programs
JavaScript document.getElementById()
The JavaScript document.getElementById() method is used, when we need to get an HTML element using its ID value. For example:
<!DOCTYPE html> <html> <body> <p>The value is <span id="x"></span>.</p> <script> var element = document.getElementById("x"); element.innerHTML = 10; </script> </body> </html>
The value is .
Note - The innerHTML sets/returns HTML content to/of specified element.
In above example, using the following statement:
var element = document.getElementById("x");
The element whose ID value is x will be initialized to the element variable. And using the following statement:
element.innerHTML = 10;
The value 10 set as the content of returned element. In case, if the returned element using its ID value, already has some content, then the content will be removed and the new content using the innerHTML will get set to it.
The above example, can also be written in this way:
<!DOCTYPE html> <html> <body> <p>The value is <span id="x"></span>.</p> <script> document.getElementById("x").innerHTML = 10; </script> </body> </html>
JavaScript document.getElementById() Syntax
The syntax of document.getElementById() method in JavaScript, is:
document.getElementById(elementID)
The getElementById() function returns an Element object, if the specified elementID exists. Otherwise, returns null.
JavaScript document.getElementById() Example
The document.getElementById() method in JavaScript, is used when we need to edit (or apply styles to) an HTML element. For example, the following JavaScript program, changes the color of an HTML element whose ID value is cc:
<!DOCTYPE html> <html> <body> <p>The name of website is <span id="cc">jobails.com</span></p> <script> var element = document.getElementById("cc"); element.style.color = "red"; </script> </body> </html>
The name of website is jobails.com
Note - If specified ID matches with multiple elements, then the first element will be returned. For example:
<!DOCTYPE html> <html> <body> <p>The name of website is <span id="100">jobails.com</span></p> <p>The name of website is <span id="100">jobails.com</span></p> <script> var element = document.getElementById("100"); element.style.color = "red"; </script> </body> </html>
The name of website is jobails.com
The name of website is jobails.com
Although, ID is unique, but we need to be aware, how the things work, when multiple elements exists with same ID.
Let me create another example of document.getElementById() method in JavaScript, where the color of text jobails.com changes, when user clicks on the button. Also, I've changed the font size of the text, before changing the color, by clicking on the button:
<!DOCTYPE html> <html> <body> <p id="1">jobails.com</p> <button onclick="chCol('red');">Change to Red</button> <button onclick="chCol('blue');">Change to Blue</button> <button onclick="chCol('yellow');">Change to Yellow</button> <script> var element = document.getElementById('1'); element.style.fontSize = "1.4em"; function chCol(newCol) { element.style.color = newCol; } </script> </body> </html>
jobails.com
« Previous Tutorial Next Tutorial »