Entendiendo el DOM
¿Para qué aprender JavaScript?
¿Qué es DOM y Window Object?
Explorando Nodos del DOM
Seleccionando y Accesando a Elementos del DOM
Consultando el DOM con getElementById y querySelector
Navegación efectiva entre nodos
Manipulando Elementos del DOM
Modificando atributos y propiedades
Modificando texto en HTML
Modificando estilos en HTML
Modificando la visibilidad de elementos HTML
Creación de elementos con HTML Strings e insertAdjacentElement()
Agregando elementos con innerHTML e insertAdjacentHTML()
Creación de elementos con createElement()
Remover elementos con remove() y removeChild()
Clonación y reemplazo de elementos con cloneNode y replaceChild
Manipulando Eventos en el DOM
Entendiendo eventos y tipos: Burbuja, Captura y Propagación
Agregar y eliminar escuchadores de eventos o Event Listeners
El objeto evento o eventObject
Manejo de entradas de formulario y validación
Delegación de eventos y prevención de comportamiento predeterminado
Creando un Administrador de Tareas
Añadir tareas desde un formulario
Eliminar y editar tareas del DOM
Almacenamiento y carga de datos en localStorage
Eliminar y editar tareas del almacenamiento local
Inspeccionando y solucionando errores en el código
Personalizando la interfaz del administrador de tareas
Aún hay más por aprender
Asincronía en JavaScript
¿Cómo funciona el JavaScript Engine?
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
How to navigate the DOM hierarchically?
Navigating the Document Object Model (DOM) is an essential skill for any web developer. Understanding how to select elements hierarchically, whether they are parents, children or ancestors, can make manipulating the HTML document much easier. In this class, we will explore how to move through the DOM using different methods and properties.
How to select parent and child elements?
To start working with the DOM, we select an element using its ID, which makes it easy to identify a specific section of the HTML we want to work with. Suppose we are interested in a <ul> with a specific ID, and we want to analyze its child elements.
const parent = document.getElementById('parents');console.log(parent);When we run this snippet, we get the element with all its children. This is useful when we want to manipulate or inspect a whole collection of nested elements.
How to access the first child of an element?
Sometimes we need to work exclusively with the first child of an element. In these cases, we can use firstElementChild, which gives us direct access to the node of the first child element.
const firstChild = parent.firstElementChild;console.log(firstChild);This is especially useful when we want to manipulate or style only the first element of a list, leaving the others as is.
How to move between siblings in the DOM?
Understanding how to move between sibling nodes in the DOM can be particularly useful. We can use properties such as nextSibling and previousSibling to access the siblings of an element.
const nextSibling = parent.nextSibling;console.log(nextSibling);
const previousSibling = parent.previousSibling;console.log(previousSibling);These properties can help us navigate to elements that are at the same hierarchical level within the DOM.
How to select an ancestor element?
Many times, it is necessary to go back in the DOM tree to find an ancestor element. The closest method allows us to accomplish this efficiently.
const grandParent = firstChild.closest('.menu');console.log(grandParent);This is extremely useful when working with heavily nested elements, as closest will look for the closest ancestor element that matches the specified selector.
What are other ways to navigate the DOM?
In addition to the above methods, there are several other useful properties and methods you can employ to move through the DOM:
children: returns a collection of the child elements of a node.childNodes: Returns all child nodes (including text and comment nodes).lastChild: Returns the last child node of an element.parentElement: Provides direct access to the parent element of a given node.
Trying these methods in different HTML structures will help you understand how the DOM works and will allow you to improve your ability to manipulate it.
How to practice navigating the DOM?
Practice is the key to improvement. I recommend you create exercises with varied HTML structures and experiment with the methods and properties we have discussed. By tackling different configurations and structures, you will gain confidence and skill in navigating the DOM.
So, let's get to work! Keep exploring and manipulating the DOM with these methods and you'll soon discover the endless possibilities that web development has to offer.
Contributions 27
Questions 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, magni! Animi, molestiae minus. Ad explicabo magnam sit corporis, accusantium voluptatem sed quae odit laboriosam vel delectus commodi sequi exercitationem natus?
</section> <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, magni! Animi, molestiae minus. Ad explicabo magnam sit corporis, accusantium voluptatem sed quae odit laboriosam vel delectus commodi sequi exercitationem natus?
</section> </main> <script src="app.js"></script> </body> </html> ```
Consulting DOM elements
There are 2 main categories of methods to make requests to the Document
- getElementby_("idNameOrWherever"): Id, ClassName, TagName...
- querySelector_(".selectorOrselector"):All
The first one gives us an HtmlColection where the changes applied are seen in real time and is better for performance The second one gives us a node list whe the changes can't be seen in real time.
Surfing the DOM with code.
<article class="article">For this is usefull to think about the DOM as a family tree, then to fix on an element that we can call parent, an then acces to the atributes: <menu>
You can also use the query method that we talk about earlier to fix a child and move from it using the next
Want to see more contributions, questions and answers from the community?