DHTML significa HTML dinámico. Dinámico significa que el contenido de la página web se puede personalizar o cambiar de acuerdo con las entradas del usuario, es decir, una página que es interactiva con el usuario. En épocas anteriores, HTML se usaba para crear una página estática. Solo definía la estructura del contenido que se mostraba en la página. Con la ayuda de CSS, podemos embellecer la página HTML cambiando varias propiedades como el tamaño del texto, el color de fondo, etc. El HTML y el CSS podrían navegar entre páginas estáticas pero no podrían hacer nada más. Si 1000 usuarios ven una página que tenía su información, por ej. Admita la tarjeta, entonces hubo un problema porque 1000 páginas estáticas para que esta aplicación funcione. A medida que aumenta la cantidad de usuarios, el problema también aumenta y, en algún momento, se vuelve imposible manejar este problema.
Para superar este problema, surgió DHTML. DHTML incluía JavaScript junto con HTML y CSS para hacer que la página fuera dinámica. Este combo dinamizó las páginas web y eliminó este problema de crear una página estática para cada usuario. Para integrar JavaScript en HTML, se crea un modelo de objeto de documento (DOM) para el documento HTML. En DOM, el documento se representa como Nodes y objetos a los que acceden diferentes lenguajes como JavaScript para manipular el documento.
El documento HTML incluye JavaScript:: El documento JavaScript se incluye en nuestra página html mediante la etiqueta html. La etiqueta <src> se usa para especificar la fuente del archivo JavaScript externo.
Las siguientes son algunas de las tareas que se pueden realizar con JavaScript:
- Realización de tareas html
- Realización de tareas CSS
- Manejo de eventos
- Validación de entradas
Ejemplo 1: Ejemplo para entender cómo usar JavaScript en DHTML.
<html>
<head>
<title>DOM programming</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p id = "geeks">Hello Geeks!</p>
<script style = "text/javascript">
document.getElementById("geeks").innerHTML =
"A computer science portal for geeks";
</script>
</body>
</html>
Salida: 
Explicación: En el ejemplo anterior, cambie el texto del párrafo que usa id. El documento es un objeto de html que se muestra en la ventana u objeto actual de DOM. getElementById(id) proporciona la identificación del elemento. El innerHTML define el contenido dentro del elemento id. El atributo id se usa para cambiar el documento HTML y su propiedad. El contenido del párrafo cambió por la identificación del documento. Por ejemplo: document.getElementById(“geeks”).style.color = “blue”; Se usa para establecer el color del párrafo usando la identificación de los elementos.
Ejemplo 2: Crear una alerta al hacer clic en un botón.
<html>
<head>
<title>Create an alert</title>
</head>
<body>
<h1 id = "para1">GeeksforGeeks</h1>
<input type = "Submit" onclick = "Click()"/>
<script style = "text/javascript">
function Click() {
document.getElementById("para1").style.color = "#009900";
window.alert("Color changed to green");
}
</script>
</body>
</html>
Salida: 
Explicación: En este ejemplo, se crea una función que se invocará al hacer clic en un botón y cambia el color del texto y muestra la alerta en la pantalla. window es un objeto de la ventana actual cuyo método incorporado alert() se invoca en la función Click().
Ejemplo 3: validar los datos de entrada mediante JavaScript.
<html>
<head>
<title>Validate input data</title>
</head>
<body>
<p>Enter graduation percentage:</p>
<input id="perc">
<button type="button" onclick="Validate()">Submit</button>
<p id="demo"></p>
<script>
function Validate() {
var x, text;
x = document.getElementById("perc").value;
if (isNaN(x) || x < 60) {
window.alert("Not selected in GeeksforGeeks");
} else {
document.getElementById("demo").innerHTML =
"Selected: Welcome to GeeksforGeeks";
document.getElementById("demo").style.color = "#009900";
}
}
</script>
</body>
</html>
Salida: 
Explicación: En este ejemplo, haga una función de validación() que garantice que el usuario sea ilegible o no. Si el usuario ingresa > 60 entonces seleccionado, de lo contrario no seleccionado.
Publicación traducida automáticamente
Artículo escrito por SukritiSukhija y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA