El DOM JavaScript

En este tutorial, vamos a aprender sobre la JavaScript DOM (Document Object Mode) en JavaScript?

El objeto Documento Modelo incorporado en el navegador tiene un papel importante en la creación de aplicaciones web dinámicas.

Hoy vamos a ver cómo podemos inyectar el contenido y el cambio de contenido en la página web utilizando JavaScript DOM mediante la construcción de una aplicación web muy sencilla.

El HTML DOM se puede acceder usando JavaScript. Esto generalmente se llama El class Programación DOM donde el Interface programación es las propiedades y métodos de cada objeto. La propiedad representa un valor que se puede obtener o establecer cambiando los elementos HTML en el método de la página es algún tipo de acción que podemos realizar como la adición o eliminación de algo de HTML. Vamos a ver tanto mediante la construcción de una sencilla aplicación.

Vamos a construir un simple To-Do aplicación en la que podemos añadir las tareas pendientes en la página web y marcarlos como completados haciendo clic en ellos. Vaya al directorio de su elección y crear un archivo index.html y añadir la siguiente plantilla de arranque,

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>DOM JS</title>
</head>
<body>
<h1>To Do List</h1>
<h3>A simple to do list using JavaScript DOM</h3>
<p>Add items to the list using the add button and mark them done by clicking them</p>
<div class="container">
<br>
<input type="text" placeholder="Type an item">
<button id="btn">Add Item!</button>
<ul class="list">
</ul>
</div>
<script>
</script>
</body>
</html>

Añadir algunos estilos en el archivo styles.css ,

body {
background: whitesmoke;
}
h1 {
margin: 5px auto;
padding: 20px;
color: brown;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center;
}
p {
text-align: center;
color: black;
font-family: Arial, Helvetica, sans-serif;
}
.container {
max-width: 400px;
padding-left: 400px;
text-align: center;
}
h3 {
text-align: center;
color: blueviolet;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
input {
text-decoration: none;
height: 40px;
background: rgba(186, 217, 230, 0.521);
border: 1px solid black;
text-align: center;
letter-spacing: 2px;
font-family: monospace;
}
button {
text-align: center;
border: 2px solid black;
border-radius: 5px;
padding: 10px;
background: steelblue;
color: white;
text-decoration: none;
cursor: pointer;
}
ul {
list-style-type: none;
}
.item {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px;
cursor: pointer;
}
.done {
text-decoration: line-through tomato;
}

HTML de salida:

The JavaScript DOM - 4

bien ahora que tenemos una configuración de estilos básicos que vamos a interface abajo nuestra lógica. Necesitamos una referencia a nuestra lista vacía, el & lt; ul & gt; etiqueta en nuestro HTML, donde vamos a insertar elementos. También necesitamos una referencia al botón que nos permitirá añadir elementos a la lista y uno para el campo de entrada. Así que vamos a hacer esto en primer lugar,

<script>
var addItem=document.querySelector('#btn');
var list=document.querySelector('.list');
var input=document.querySelector('input');
</script>

Ahora tenemos que adjuntar un detector de eventos de tipo clic en nuestro botón. Puede leer más acerca de los detectores de eventos aquí. En el interior del detector de eventos, vamos a tener una referencia al texto que el usuario ha escrito en el campo de entrada y luego añadir que el texto en la lista. Vamos a crear algo de HTML usando una plantilla y añadir que a nuestra lista utilizando la propiedad innerHTML .

<script>
var input=document.querySelector('input');
var newItem=input.value;
var addItem=document.querySelector('#btn');
var list=document.querySelector('.list');
addItem.addEventListener('click',e=>{
var newItem=document.querySelector('input').value;
var html='<li><span class="item">${newItem}</span></li>';
list.innerHTML+=html;
})
</script>

class una mejor break usuario, hay que limpiar el campo de entrada ya que hemos anexado ya que elemento de la página. Podemos hacer esto estableciendo el valor del campo de entrada a una cadena vacía,

    input.value = "";

HTML de salida:

The JavaScript DOM - 5

Gran! Ahora podemos añadir elementos a la lista y hemos hecho todo esto con ayuda de JavaScript mediante la manipulación del DOM HTML. Ahora lo único que queda es para marcar los elementos de la lista como se hace haciendo clic en ellos. Diríjase a la hoja de estilo y ver que tenemos un class hecho que los estilos de nuestros códigos span o los elementos de la lista de forma diferente.

Todo lo que tenemos que hacer es conectar un detector de eventos a nuestros artículos y añadir a class hecho a estos artículos. Así que vamos a hacer esto,

list.addEventListener('click',e=>{
//console.log(e.target.innerHTML);
e.target.classList.toggle('done');
})

HTML de salida:

The JavaScript DOM - 6

Hemos terminado ahora! Echar un vistazo a todo el código JavaScript que hemos escrito para manipular DOM,

<script>
var input=document.querySelector('input');
var addItem=document.querySelector('#btn');
var list=document.querySelector('.list');
addItem.addEventListener('click',e=>{
var newItem=input.value;
//console.log(newItem);
var html='<li><span class="item">${newItem}</span></li>';
list.innerHTML+=html;
input.value="";
})
list.addEventListener('click',e=>{
//console.log(e.target.innerHTML);
e.target.classList.toggle('done');
})
</script>

Voila! Ahora puede marcar los artículos realizados haciendo clic en ellos y les marcar deshecha nuevamente haciendo clic en ellos. Hemos hecho esta sencilla aplicación For solamente mediante la manipulación del DOM a través de JavaScript.

Como ejercicio puede añadir otra característica de esta aplicación. Añadir un botón que elimina todos los elementos de la lista. Piense, va a ser un juego de niños para implementar este ahora que tiene una caída de JavaScript DOM.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *