(en el browser)
La razón por la que aparece JavaScript es para que podamos interactuar con los diferentes sitios web
Cuando hablamos de documento, estamos haciendo referencia al archivo HTML que estamos viendo en el browser
Cada uno de los elementos o componentes de nuestro sitio (tags de HTML, texto, etc) van a estar representados en el DOM mediante un objeto
El DOM es un modelo que representa la estructura, los elementos (y la relación entre éstos) de un sitio web
Node.nodeType
Node.nodeName
Node.hasChildNodes()
Node.childNodes
Node.parentNode
Node.cloneNode(true || false)
document
document.head;
document.body;
if (document.body.nodeType === document.ELEMENT_NODE) {
console.log("Body is an element node!");
} else {
console.log("Body is a textual node!");
}
document.getElementById
document.getElementsByClassName
document.getElementsByTagName
for (let i = 0; i < bookLists.length; i++) {
console.log(bookLists[i]);
}
bookLists = Array.from(bookLists);
bookLists.forEach(list => console.log(list));
document.querySelector
document.querySelectorAll
const authors = document.querySelectorAll('#fantasy .author');
authors.forEach(author => console.log(author));
authors.forEach(author => console.log(author.textContent));
authors.forEach(author => author.textContent = "Ricky Fort");
authors.forEach(author => author.textContent += ", Ricky Fort");
// Show href attribute of the first link
console.log(document.querySelector("a").getAttribute("href"));
// Show ID attribute of the first list
console.log(document.querySelector("ul").id);
// Show href attribute of the first link
console.log(document.querySelector("a").href);
if (document.querySelector("a").hasAttribute("target")) {
console.log("The first link has a target attribute.");
} else {
console.log("The first link does not have a target attribute.");
}
const booksLists = document.querySelectorAll(".book-list");
booksLists[0].innerHTML = "<p>There are no books in this category</p>";
(o sea recorrerlo)
element.querySelector
<div class="component">
<h2 class="component__title">Component title</h2>
</div>
const component = document.querySelector('.component');
const title = component.querySelector('.component__title');
element.querySelector
childNodes
<ul class="list">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
const list = document.querySelector('.list');
const listItems = list.childNodes;
childNodes
parentNode
const author = document.querySelector('.author');
const listItems = author.parentNode;
const list = listItems.parentNode;
// también puedo encadenar
author.parentNode.parentNode;
parentNode
closest
closest
<ul class="list">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
const firstLink = document.querySelector('a');
const list = firstLink.closest('.list');
children & parentElement
(entre nodos que estén al mismo nivel)
nextSibling
nextSibling
<ul class="list">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
const firstListItem = document.querySelector('li');
const secondListItem = firstListItem.nextSibling;
previousSibling
previousSibling
<ul class="list">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
const secondListItem = document.querySelectorAll('li')[1];
const firstListItem = secondListItem.previousSibling;
nextElementSibling & previousElementSibling