Ejercicio de programación con JavaScript: Selección de elementos DOM

Crea un archivo HTML con el nombre index.html que contenga una estructura básica de página web. Incluye un <div> con id="container" que contendrá todos los elementos con los que trabajarás.

Dentro del contenedor, añade los siguientes elementos:

• Un <h1> con id="title" y texto "Práctica de selección DOM"
• Tres párrafos <p>: el primero con id="first-paragraph", el segundo con clase="highlight", y el tercero sin atributos especiales
• Una lista desordenada <ul> con id="my-list" que contenga 5 elementos <li>, donde el tercero tenga la clase="special-item"
• Dos <div> con clase="box", cada uno conteniendo un párrafo <p> con clase="box-content"
• Un botón <button> con id="action-button" y texto "Ejecutar selecciones"
• Un <div> con id="results" donde se mostrarán los resultados

Crea un archivo JavaScript llamado script.js y vincúlalo al final del body de tu HTML. Añade un evento que se active cuando se haga clic en el botón "Ejecutar selecciones".

Implementa las siguientes funciones de selección en tu archivo JavaScript:

• selectById(): Selecciona elementos por ID (al menos 2 ejemplos)
• selectByTagName(): Selecciona elementos por nombre de etiqueta (al menos 2 ejemplos)
• selectByClassName(): Selecciona elementos por nombre de clase (al menos 2 ejemplos)
• selectByQuerySelector(): Selecciona elementos usando querySelector (al menos 2 ejemplos)
• selectByQuerySelectorAll(): Selecciona elementos usando querySelectorAll (al menos 2 ejemplos)

Para cada función, muestra el resultado en la consola y también en el div con id="results". Cada resultado debe mostrar qué método se usó y qué elementos se encontraron (puedes mostrar el número de elementos y alguna propiedad como el texto o el nombre de la etiqueta).

Implementa una función convertToArray() que tome una colección DOM (como la devuelta por getElementsByTagName()) y la convierta a un array usando Array.from() o el operador spread (...). Muestra el resultado y demuestra al menos un método de array como map() o filter().

Asegúrate de que tu código maneje correctamente los casos en que no se encuentre ningún elemento (por ejemplo, usando condicionales para verificar si el resultado es null o si la colección está vacía).

Añade estilos CSS básicos para que los elementos seleccionados se destaquen visualmente cuando sean seleccionados (por ejemplo, cambiando el color de fondo o añadiendo un borde).