jQuery DOM

En este artículo, vamos a ver cómo manipular el DOM, actualización, eliminación de elementos y atravesando el DOM usando las relaciones entre padres e hijos en jQuery?

Vamos a crear una sencilla aplicación que muestra una lista de sus próximos exámenes,

index.html:

<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">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title>schedule</title>
<style>
body {
background: linear-gradient(#ffe57f, #ffc400);
}
.card-image img {
height: 200px;
width: 200px;
}
</style>
</head>
<script>
var id = 0;
</script>
<body>
<div class="container">
<h2 class="center title">Exam Schedule</h2>
<div class="container">
<ul class="collection center #ffff8d" id="subject-list">
<h4 class="subject-name"><li class="collection-item ">English</li></h4>
<h4 class="subject-name"><li class="collection-item ">Maths</li></h4>
<h4 class="subject-name"><li class="collection-item ">Physics</li></h4>
<h4 class="subject-name"><li class="collection-item ">Chemistry</li></h4>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>

salida

JQuery DOM - 4

ver Vamos cómo el árbol DOM le gustaría class esta aplicación?

<h2>
<div>
<ul>
<h4> <h4> <h4> <h4>
<li> <li> <li> <li>

& lt; h2 & gt; es el hermano de la & lt; div & gt; que tiene un niños & lt; ul & gt; que tiene 4 niños, la & lt; h4 & gt; que contienen cada uno un niño & lt; li & gt; . Todos estos & lt; h4 & gt; compartir una relación de hermanos entre sí. Vamos a ver cómo recorrer el DOM utilizando esta relación DOM?

    console.log($('h2')[0]);

salida

    <h2 class="center title">Exam Schedule</h2>

Podemos recorrer desde el título a nuestro & lt; ul & gt; llamando al método de hermanos,

    console.log($('h2').siblings()[0]);

salida

    <div class="container">
...
</div>

El método hermanos () no nos lleva a todos los hermanos de ese elemento que es un solo & lt; div & gt; elemento.

    console.log($('h2').siblings().children()[0]);

salida

    <ul class="collection center #ffff8d" id="subject-list">
...
</ul>

Los método children () nos devuelve todos los hijos de ese elemento. Así que ahora estamos en el & lt; ul & gt; y podemos acceder aún más la & lt; h4 & gt; llamando al método niños otra vez.

    console.log($('h2').siblings().children().children()[0]);

salida

    <h4 class="subject-name"><li class="collection-item ">English</li></h4>

Observe cómo conseguimos solamente el primer elemento secundario ya que este método sólo taverses abajo un nivel DOM. Si nos dirigimos a la & lt; ul & gt; directamente podemos llegar a todos los niños usando los método children () ,

    console.log($('#subject-list').children());

Salida:

    k.fn.init(4) [h4.subject-name, h4.subject-name, h4.subject-name, h4.subject-name, prevObject: k.fn.init(1)]
0: h4.subject-name
1: h4.subject-name
2: h4.subject-name
3: h4.subject-name
length: 4
prevObject: k.fn.init [ul#subject-list.collection.center.#ffff8d]
__proto__: Object(0)

Digamos que haya terminado con el papel de las matemáticas y quieren eliminar este elemento de la lista .

    $('#subject-list').children()[1].remove();

salida

JQuery DOM - 5

Puede eliminar un elemento del DOM utilizando el método remove ().

    console.log($('#subject-list').parent());

salida

    k.fn.init [div.container, prevObject: k.fn.init(1)]

Así podemos atravesar hacia arriba el DOM utilizando el método parent ().

    console.log($('#subject-list').children().first()[0]);
console.log($('#subject-list').children().last()[0]);

salida

    <h4 class="subject-name"><li class="collection-item ">English</li></h4>
<h4 class="subject-name"><li class="collection-item ">Chemistry</li></h4>

También podemos utilizar algunos métodos de filtro como primero () y la última () para obtener los elementos primero y último de la colección.


Deja un comentario

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