HTML DOM onload Event

15 Nov, 2021
The DOM onload event in HTML occurs when an object has been loaded. The onload event is mostly used within the <body> tag, in order to run the script on the web page that will load all the content completely. The onload event can be used to check the user’s browser type and browser version, and load the version of the web page based on the information. The onload event can also be used for cookies. 
Supported tags:
<body>: It is used to define the main content present inside an HTML page.
<frame>: It is used to divide the web browser window into multiple sections where each section can be loaded separately.
<iframe>: It is used to define a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.
<img>: It is used to add image inside webpage/website.
<input type=”image”>: It is used to specify the type of <input> element to display.
<link>: It is used to define a link between a document and an external resource.
<script>: It is used to define the client-side script.
<style>: It is used to modify our text, viewed in the page.
Syntax:
In HTML:<element onload="scriptFile">
In HTML:
<element onload="scriptFile">
In JavaScript:object.onload = function(){scriptFile};
In JavaScript:
object.onload = function(){scriptFile};
In JavaScript, using the addEventListener() method:object.addEventListener("load", scriptFile);
In JavaScript, using the addEventListener() method:
object.addEventListener("load", scriptFile);
Example: using the addEventListener() method
HTML
<!DOCTYPE html><html>  <head>    <title>HTML DOM onload Event</title></head>  <body>    <center>      <img src="https://media.geeksforgeeks.org/wp-content/uploads/20211113003851/geeks-300x83.png"            id="imgid"            alt="GFG_logo">        <p id="pid"></p>          <script>        document.getElementById("imgid").addEventListener("load", GFGFun);        function GFGFun() {            document.getElementById("pid").innerHTML = "Image loaded";        }        </script>    </center></body>  </html>
Here, the getElementById() method will return the elements that have given an ID which is passed to the function. It can also be used to change the value of any particular element or get a particular element. The DOM innerHTML property will be used to set or return the HTML content of an element.
Output:
DOM onload Event
Supported Browsers: The browsers supported by HTML DOM onload Event are listed below:
Google Chrome 1.0
Internet Explorer 9.0
Microsoft Edge 12.0
Firefox 1.0
Safari 3.0
Opera 9.0
ManasChhabra2
bhaskargeeksforgeeks
HTML-DOM
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array