Evento de carga HTML DOM – Barcelona Geeks

El evento de carga DOM en HTML ocurre cuando se ha cargado un objeto. El evento onload se usa principalmente dentro de la etiqueta <body> , para ejecutar el script en la página web que cargará todo el contenido por completo. El evento onload se puede usar para verificar el tipo de navegador del usuario y la versión del navegador, y cargar la versión de la página web según la información. El evento onload también se puede utilizar para cookies.

Etiquetas compatibles:

<body> : Se utiliza para definir el contenido principal presente dentro de una página HTML.
<frame> : se utiliza para dividir la ventana del navegador web en varias secciones donde cada sección se puede cargar por separado.
<iframe> : se utiliza para definir una región rectangular dentro del documento en la que el navegador puede mostrar un documento separado, incluidas las barras de desplazamiento y los bordes.
<img> : Se usa para agregar una imagen dentro de una página web/sitio web.
<input type=”image”> : Se utiliza para especificar el tipo de elemento <input> a mostrar.
<enlace> : Se utiliza para definir un enlace entre un documento y un recurso externo.
<script> : Se utiliza para definir el script del lado del cliente.
<style> : Sirve para modificar nuestro texto, visto en la página.

Sintaxis:

En HTML:
```
<element onload="scriptFile">
```
En JavaScript:
```
object.onload = function(){scriptFile};
```
En JavaScript, usando el método addEventListener() :
```
object.addEventListener("load", scriptFile);
```

Ejemplo: usando el método addEventListener()

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>

Aquí, el método getElementById() devolverá los elementos que han dado una ID que se pasa a la función. También se puede usar para cambiar el valor de cualquier elemento en particular u obtener un elemento en particular. La propiedad DOM innerHTML se utilizará para establecer o devolver el contenido HTML de un elemento.

Producción:

Evento de carga de DOM

Navegadores compatibles: los navegadores compatibles con el evento de carga del DOM HTML se enumeran a continuación:

Google Chrome 1.0
Internet Explorer 9.0
Microsoft Edge 12.0
Firefox 1.0
Safari 3.0
Ópera 9.0

Publicación traducida automáticamente

Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta