Propiedades del nodo: Tipo, etiqueta y contenido

Dominar el Modelo de Objetos de Documento (DOM) es esencial para cualquier desarrollador web que busque manipular páginas web de forma dinámica. Este artículo profundiza en los aspectos centrales de las propiedades de los nodos del DOM, proporcionando ejemplos de código prácticos para mejorar tus habilidades de programación en JavaScript.

Comprender los tipos y nombres de nodos

En JavaScript, el árbol del DOM está compuesto por nodos de varios tipos. Cada nodo en el documento es un objeto que representa una parte del mismo. Los nodos pueden ser nodos de elemento, nodos de texto, nodos de atributo, etc. Aquí tienes un breve resumen:

• Nodos de elemento: Representan etiquetas HTML o XML.
• Nodos de texto: Contienen el texto dentro de los elementos HTML.
• Nodos de atributo: Atributos de los elementos HTML (no se usan directamente en el DOM de JavaScript moderno).

Tipos de nodo

Este fragmento de código te ayuda a determinar el tipo de un nodo, lo cual es crucial cuando recorres el DOM y necesitas tomar decisiones basadas en los tipos de nodo. La propiedad nodeType es un número entero. Cada tipo de nodo está asociado con un valor numérico específico según la especificación del DOM. Estos son los tipos de nodo más comunes:

• Nodo de elemento: Representado por el número 1. Este tipo corresponde a elementos HTML o XML.
• Nodo de atributo: Representado por el número 2. Estos nodos se utilizan para especificar atributos de elementos, aunque JavaScript moderno suele interactuar con los atributos directamente a través de métodos como getAttribute() y setAttribute(), en lugar de tratarlos como nodos.
• Nodo de texto: Representado por el número 3. Estos son los elementos de texto contenidos dentro de los elementos del documento. Los nodos de texto pueden contener texto real y son cruciales para manipular el contenido de texto del documento HTML.
• Nodo de comentario: Representado por el número 8. Estos nodos representan los comentarios en los archivos HTML o XML.
• Nodo de documento: Representado por el número 9. Este tipo de nodo representa el documento completo (es decir, el elemento raíz, como el propio documento HTML).

---

<div id="example">Example node</div>
<script>
    const node = document.getElementById("example");
    node.innerHTML = 'Node type is: ' + node.nodeType;
</script>

Result

Try it Yourself »

Nombres de nodo

Este ejemplo demuestra cómo usar nodeName. Es una propiedad que muestra el nombre de la etiqueta que utilizas en tu archivo HTML.

---

<div id="example"></div>
<script>
    const element = document.getElementById('example');
    element.innerHTML = 'nodeName: ' + element.nodeName;
</script>

Result

Try it Yourself »

Manipulación del contenido de texto

Modificar el contenido de texto de los nodos es una tarea frecuente. La propiedad textContent es una forma potente de obtener o establecer el contenido de texto de un nodo y sus descendientes, ignorando las etiquetas HTML.

Ejemplo de código: Actualización del contenido de texto

Este script muestra cómo actualizar el contenido de texto de un elemento utilizando textContent:

---

<div id="example"></div>
<script>
  const element = document.getElementById('example');
  element.textContent = 'Updated text content';
</script>

Result

Try it Yourself »

Conclusión

Comprender y manipular las propiedades de los nodos del DOM es una habilidad fundamental para cualquier desarrollador de JavaScript. Al aprender a utilizar correctamente propiedades como nodeName y textContent, podrás gestionar eficazmente los elementos en tus páginas web. Estos ejemplos proporcionan una base sólida para realizar tareas comunes que implican nodos del DOM.

Práctica

¿Qué indica la propiedad 'nodeType' en un nodo del DOM en JavaScript?

'nodeType' especifica si el nodo es un Elemento, Atributo o Texto.'nodeType' proporciona el nombre de clase del nodo.'nodeType' es un valor numérico, donde 1 representa un nodo de Elemento y 3 un nodo de Texto.'nodeType' indica si el nodo es visible en el documento.