Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
El método querySelectorAll y la colección
Ya vimos que el popup aparece al hacer clic en el primer botón, pero al hacer clic en el segundo no pasa nada. Vamos a ver por qué.
El problema es que querySelector solo encuentra el primer elemento que coincide. Aunque haya varios elementos en la página con ese selector, el método devolverá únicamente el primero. Para encontrarlos todos, se usa querySelectorAll:
// Encontrará todos los párrafos de la página
let elements = document.querySelectorAll('p');El método querySelectorAll encuentra todos los elementos que coinciden y devuelve un conjunto de ellos, es decir, una colección.
Igual que un elemento normal, una colección se puede guardar en una variable. Para ver qué contiene, conviene mostrarla en la consola:
// Mostrará la colección en la consola
console.log(elements);En la consola, la colección se ve como una lista entre corchetes. Sus elementos aparecen separados por comas:
[p.card__text, p, p]
Si despliegas la colección, podrás ver sus elementos con más detalle:
[p.card__text, p, p, p]
[p.card__text, p, p]
<p class="card__text">¡Vamos a preparar helado!</p>
<p>Ciudad de México</p>
<p>mail@example.com</p>
Las palabras-botón de nuestro sitio son elementos con la clase tooltip-button. Vamos a encontrarlas todas y a mostrar la colección en la consola.
Todos los archivos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews!</title>
</head>
<body class="page light-theme">
<header class="page-header">
<div class="container">
<span class="header-logo">
<img src="img/main-logo.svg" width="67" height="29" alt="Logotipo del portal FlashNews!">
</span>
<button class="theme-button" type="button">Cambiar tema</button>
</div>
</header>
<main class="inner-news">
<div class="tooltip">
<span class="tooltip-text"></span>
<button class="button close-button" type="button"><span>Cerrar</span></button>
</div>
<article class="container">
<h1 class="inner-heading">Dronovirus</h1>
<div class="news-full">
<img src="img/drone.jpg" alt="Dron pequeño">
<div class="news-stats">
<button class="heart" type="button"><span class="likes-number">37</span></button>
<time datetime="2019-12-22">22 de diciembre de 2019</time>
</div>
<p>Los diseñadores del laboratorio <button class="tooltip-button" type="button" data-tooltip-text="un laboratorio bastante mediocre">DogDrones.inc</button> aseguraron que sus drones no pueden transmitir virus peligrosos porque no están programados para eso. <button class="tooltip-button" type="button" data-tooltip-text="aunque eso no está del todo claro; nota del abogado">Tal vez</button>, la verdadera razón es que los drones del laboratorio no pueden transportar absolutamente nada.</p>
</div>
</article>
<section class="comment-feed container">
<h2>Comentarios</h2>
<ol class="comment-list">
<li class="user-comment">¿Y qué opinan de los drones de Keksoflot? No es publicidad.</li>
</ol>
<form action="https://codigoheroe.com/courses" method="post" class="comment-form">
<div class="comment-inner">
<label class="comment-label" for="comment-textarea">Tu comentario</label>
<textarea class="comment-field comment-area" rows="3" placeholder="Comentario" required id="comment-textarea"></textarea>
</div>
<button class="button submit-button" type="submit">Enviar</button>
</form>
</section>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<span class="footer-logo">
<img src="img/white-logo.svg" alt="Logotipo del portal FlashNews!">
</span>
</div>
</footer>
<script src="themes.js"></script>
<script src="likes.js"></script>
<script src="comments.js"></script>
<script src="tooltip.js"></script>
</body>
</html>
/* Estilos del texto del botón */
.tooltip-button {
cursor: pointer;
position: relative;
padding: 1px 8px;
border: none;
color: inherit;
font: inherit;
}
.tooltip-button::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 0;
border: 4px solid;
border-left-color: transparent;
border-bottom-color: transparent;
}
/* Estilos del tooltip */
@keyframes tooltip-opener {
0% {
transform: translate(50%) scaleX(0);
}
100% {
transform: translate(100%) scaleX(100%);
}
}
.tooltip {
z-index: 2;
display: none;
flex-direction: row-reverse;
position: fixed;
max-width: 256px;
right: 0;
top: 160px;
border-radius: 8px 0 0 8px;
}
.opened {
display: flex;
animation: tooltip-opener 150ms;
}
.tooltip-text {
display: flex;
align-items: center;
padding: 10px;
}
.close-button {
min-height: 64px;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
margin: 0;
padding: 0;
border-radius: 8px 0 0 8px;
}
.close-button span {
display: inline-block;
vertical-align: middle;
transform: rotate(-90deg);
}
/* Estilos del bloque de entrada de comentarios */
.comment-area {
height: unset;
resize: none;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
line-height: 24px;
}
.text-counter {
display: inline-block;
vertical-align: baseline;
padding: 7px 0;
margin-right: auto;
}
.comment-form.warning .comment-label {
color: #f05b29;
}
.comment-form.warning .comment-area {
color: #f05b29;
border-color: #f05b29;
}
.comment-form.warning .comment-area:focus {
outline-color: #f05b29;
}
.comment-form.warning .char-counter {
color: #f05b29;
font-weight: bold;
}
.submit-button:disabled {
opacity: 0.25;
}
/* Temas de color */
.light-theme .tooltip {
background-color: #ffffff;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}
.light-theme .tooltip-button {
background-color: #f2f2f2;
}
.light-theme .tooltip-button:focus,
.light-theme .tooltip-button:hover {
background-color: #6653d9;
color: #ffffff;
outline-color: #b6aaff;
}
.tooltip-button:active {
opacity: 0.6;
}
.light-theme .tooltip-button::after {
border-right-color: #6653d9;
border-top-color: #6653d9;
}
.dark-theme .tooltip {
background-color: #2a2930;
box-shadow: 0 0 16px rgba(0, 0, 0, 1);
}
.dark-theme .tooltip-button {
background-color: #0a0910;
}
.dark-theme .tooltip-button:focus,
.dark-theme .tooltip-button:hover {
outline-color: #6653d9;
background-color: #b6aaff;
color: #17161a;
}
.dark-theme .tooltip-button::after {
border-right-color: #b6aaff;
border-top-color: #b6aaff;
}
let tooltip = document.querySelector('.tooltip');
let tooltipButton = document.querySelector('.tooltip-button');
let closeButton = document.querySelector('.close-button');
// Declara la variable aquí
tooltipButton.onclick = function () {
tooltip.classList.add('opened');
};
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};
let commentForm = document.querySelector('.comment-form');
let commentList = document.querySelector('.comment-list');
let commentField = document.querySelector('.comment-field');
commentForm.onsubmit = function (evt) {
evt.preventDefault();
let newComment = document.createElement('li');
newComment.classList.add('user-comment');
newComment.textContent = commentField.value;
commentField.value = '';
commentList.append(newComment);
};
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
let heart = document.querySelector('.heart');
let likesNumber = document.querySelector('.likes-number');
heart.onclick = function () {
if (heart.classList.contains('added')) {
likesNumber.textContent--;
} else {
likesNumber.textContent++;
}
heart.classList.toggle('added');
};
El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
100%
Consola
- En la línea 4, declara la variable
tooltipButtonsy guarda en ella la colección que devuelve la instruccióndocument.querySelectorAll('.tooltip-button'). - En la línea siguiente, muestra la variable
tooltipButtonsen la consola. - Abre la consola. Para ver qué elementos contiene la colección, desplégala haciendo clic en el triángulo que está a la izquierda de la lista.