Días 10–11: Preparación de Entrevistas DOM
Qué es el DOM y cómo lo crea el navegador: El DOM o Modelo de Objetos del Documento es una representación en memoria de la estructura de un documento HTML o XML organizada en nodos. Cuando el navegador descarga HTML lo parsea y construye el DOM creando nodos para elementos, atributos y texto; luego el motor de renderizado calcula estilos y layout. Esta representación permite a JavaScript leer y manipular la estructura, el estilo y el contenido de la página en tiempo real.
Diferencias entre getElementById, getElementsByClassName, querySelector y querySelectorAll: getElementById devuelve un solo elemento por id y es muy rápido. getElementsByClassName devuelve una HTMLCollection viva con todos los elementos que comparten una clase. querySelector acepta selectores CSS y devuelve el primer elemento que cumple, mientras que querySelectorAll devuelve un NodeList estático con todos los matches. Ejemplo de uso: document.getElementById("miId"), document.getElementsByClassName("miClase")[0], document.querySelector(".miClase p"), document.querySelectorAll("li").
Diferencia entre innerText, textContent e innerHTML: textContent devuelve o establece el texto de un nodo tal cual, sin procesar HTML y es más rápido y seguro. innerText respeta el estilo CSS y puede disparar reflow porque calcula texto visible. innerHTML devuelve o establece contenido HTML como cadena, permitiendo insertar etiquetas, pero con riesgo de inyección si no se valida el contenido.
Qué son los event listeners y por qué usar addEventListener en lugar de handlers inline como onclick: Un event listener es una función que responde a eventos DOM como click, input, submit. addEventListener permite añadir múltiples listeners al mismo elemento para un mismo tipo de evento, separar JavaScript del HTML, manejar fases de evento y remover listeners con removeEventListener. Los handlers inline como onclick sobreescriben handlers previos y mezclan lógica con marcado, lo que dificulta mantenimiento.
Explicación de == vs === con ejemplos: == compara con coerción de tipos, es decir convierte operandos a un tipo común antes de comparar. === compara sin coerción, compara tipo y valor estrictamente. Ejemplos: 5 == "5" es true porque "5" se convierte a número; 5 === "5" es false porque tipos difieren. null == undefined es true pero null === undefined es false. Es buena práctica usar === para evitar resultados inesperados.
Qué es event bubbling: El bubbling es la fase por defecto donde un evento se propaga desde el nodo objetivo hacia los ancestros hasta el root. Qué es event capturing: El capturing es la fase inversa en la que el evento baja desde la raíz hacia el objetivo; addEventListener permite indicar capture poniendo true como tercer argumento o usando opciones. Cómo detener la propagación: Se puede usar event.stopPropagation() para impedir que el evento siga propagándose en la fase actual. Para evitar el comportamiento por defecto del navegador se usa event.preventDefault().
Explicación de event delegation y por qué es útil: La delegación de eventos consiste en añadir un listener en un ancestro común para manejar eventos de muchos elementos hijos, usando event.target para detectar el origen. Es útil para optimizar rendimiento evitando añadir muchos listeners y para manejar elementos creados dinámicamente sin re-asignar listeners.
Diferencia entre target y currentTarget en objetos evento: event.target es el elemento real que originó el evento (el más profundo), mientras que event.currentTarget es el elemento al que está asociado el listener que se está ejecutando. En delegación se compara event.target con selectores o se sube en la jerarquía con parentNode para localizar el elemento relevante.
Cómo crear y anexar elementos dinámicamente: Se usa document.createElement("tag"), se configuran atributos y contenido con element.textContent o element.innerHTML, y luego se añade al DOM con parent.appendChild(node) o parent.insertBefore(node, reference). Ejemplo: var li=document.createElement("li"); li.textContent="Tarea"; document.getElementById("lista").appendChild(li);.
Diferencia entre removeChild y remove(): removeChild es un método del nodo padre que elimina un hijo específico y requiere referenciar al padre: parent.removeChild(child). remove() es un método del propio elemento que lo elimina de su padre directamente: child.remove(). removeChild devuelve el nodo eliminado, remove no devuelve valor.
Preguntas de código con soluciones breves:
Swap Text Between Two Elements usando getElementById: Ejemplo HTML: <div id=div1>A</div><div id=div2>B</div><button id=swap>Swap</button> <script>var b=document.getElementById("swap");b.addEventListener("click",function(){var e1=document.getElementById("div1");var e2=document.getElementById("div2");var tmp=e1.textContent;e1.textContent=e2.textContent;e2.textContent=tmp;});</script>.
Live Character Counter para textarea con máximo 100: Ejemplo: <textarea id=ta maxlength=100></textarea><span id=counter>100 caracteres restantes</span><script>var ta=document.getElementById("ta");var c=document.getElementById("counter");ta.addEventListener("input",function(){c.textContent=100-ta.value.length+" caracteres restantes"});</script>.
Color Changer con querySelector: <button id=red>Red</button><button id=green>Green</button><button id=blue>Blue</button><script>document.querySelector("#red").addEventListener("click",function(){document.body.style.background="red"});document.querySelector("#green").addEventListener("click",function(){document.body.style.background="green"});document.querySelector("#blue").addEventListener("click",function(){document.body.style.background="blue"});</script>.
Stop Event Propagation ejemplo: <div id=parent style="padding:20px;background:#eee;"><div id=child style="padding:10px;background:#ccc;">Click me</div></div><script>document.getElementById("parent").addEventListener("click",function(){console.log("parent clicked")});document.getElementById("child").addEventListener("click",function(e){e.stopPropagation();console.log("child clicked and propagation stopped")});</script>.
Dynamic List Builder que añade elementos: <ul id=list></ul><button id=add>Add Item</button><script>document.getElementById("add").addEventListener("click",function(){var li=document.createElement("li");li.textContent="Item "+ (document.getElementById("list").children.length+1);document.getElementById("list").appendChild(li);});</script>.
Mini proyecto: Lista de tareas interactiva con delegación de eventos - características y ejemplo: Funcionalidades solicitadas: añadir tareas dinámicamente, marcar tareas como completadas al hacer click, eliminar tareas usando delegación, estilizar tareas completadas con tachado. Ejemplo sencillo: <input id=newTask placeholder=Escribe una tarea><button id=addTask>Add</button><ul id=tasks></ul><script>var input=document.getElementById("newTask");document.getElementById("addTask").addEventListener("click",function(){if(!input.value) return;var li=document.createElement("li");li.innerHTML=input.value+" <button class=del>Eliminar</button>";document.getElementById("tasks").appendChild(li);input.value="";});document.getElementById("tasks").addEventListener("click",function(e){if(e.target.classList && e.target.classList.contains("del")){var li=e.target.parentNode;li.remove();}else{var clicked=e.target;if(clicked.tagName==="LI"){clicked.classList.toggle("done");}}});</script> Añada en CSS la clase done con text-decoration: line-through para el estilo de completada.
Consejos para preparaciones de entrevistas DOM en Días 10 11: Practique responder preguntas teóricas y escriba pequeños fragmentos de código en el navegador. Repase cómo funcionan fases de eventos, selectores y la manipulación del árbol DOM. Intente construir mini proyectos como la lista de tareas para demostrar dominio de creación, adjunción y eliminación de nodos, y muestre optimizaciones como event delegation.
Sobre Q2BSTUDIO: En Q2BSTUDIO somos una empresa de desarrollo de software que crea aplicaciones a medida y software a medida para clientes de distintos sectores. Trabajamos con soluciones de inteligencia artificial, agents IA y servicios de ciberseguridad, y ofrecemos servicios cloud en plataformas como AWS y Azure. Si buscas desarrollo de aplicaciones multiplataforma conoce nuestro enfoque en desarrollo de aplicaciones a medida y cómo integrarlas con automatizaciones y analítica. También ofrecemos servicios de IA para empresas y consultoría en inteligencia artificial que pueden acelerar sus procesos; más detalles sobre nuestra oferta de IA en soluciones de inteligencia artificial. Incorporamos además servicios de inteligencia de negocio y power bi para mejorar la toma de decisiones, pentesting y ciberseguridad y servicios cloud aws y azure para desplegar y proteger sus sistemas.
Palabras clave integradas: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi para mejorar posicionamiento.
Resumen rápido: Practique selectores, manipulación de texto y nodos, diferencia entre métodos y propiedades, escucha y propagación de eventos, y prefiera addEventListener y delegación cuando tenga muchos elementos dinámicos. Estos conceptos son habituales en entrevistas sobre DOM y desarrollo front end y demostrar dominio práctico con ejemplos como los anteriores le dará ventaja.