Tengo una pregunta sobre estos dos códigos similares y quiero saber las ventajas y desventajas de usarlo. ¿O no importa cuál usar? En la primera versión estoy usando parámetros y en la segunda no... También estoy interesado en all_h1.querySelectorAll(`h1`) ¿Por qué no es lo mismo que const children =parent.childNodes;
```HTML <div id="parent"> <h1>We Will Manipulate LIVE nodeList Element nodes and #textNodes</h1> <h1>We Will Manipulate LIVE nodeList Element nodes and #textNodes</h1> <h1>We Will Manipulate LIVE nodeList Element nodes and #textNodes</h1> <h1>We Will Manipulate LIVE nodeList Element nodes and #textNodes</h1> <h1>We Will Manipulate LIVE nodeList Element nodes and #textNodes</h1> <h1>We Will Manipulate LIVE nodeList Element nodes and #textNodes</h1> </div> ``` .addStyle { width: 1050px; border-radius: 50px; padding: 0.5em 0.5em; }primera versión del código con el uso de Parámetros:
const parent = document.querySelector(`#parent`); //const children = parent.childNodes; const function_CreateH1 = (parent_container, text_parameter) => { parent_container.insertAdjacentHTML(`afterbegin`, `<h1>${text_parameter}</h1>`); }; function_CreateH1(parent, `Add New H1 element Wait (1,2,3...and Go)`); const replaceAllH1Text = (all_h1, newtext_parameter) => { all_h1.querySelectorAll(`h1`).forEach((elem) => { elem.textContent = newtext_parameter; elem.style.backgroundColor = `brown`; elem.style.color = `white`; elem.classList.add(`addStyle`); //Why isn't working children.forEach and etc. }); }; setTimeout(() => { replaceAllH1Text(parent, `We access and Modify H1 elements itselfs and #Text nodes`); }, 3000);Segunda versión del código sin usar Parámetros en función:
const parent = document.querySelector(`#parent`); //const children = parent.childNodes; const function_CreateH1 = () => { parent.insertAdjacentHTML(`afterbegin`, `<h1>Add New H1 element Wait (1,2,3...and Go)</h1>`); }; function_CreateH1(); const replaceAllH1Text = () => { parent.querySelectorAll(`h1`).forEach((elem) => { elem.textContent = `We access and Modify H1 elements itselfs and #Text nodes`; elem.style.backgroundColor = `brown`; elem.style.color = `white`; elem.classList.add(`addStyle`); //Why isn't working children.forEach and etc. }); }; setTimeout(() => { replaceAllH1Text(); }, 3000);Puede simplificar el bucle de código document.querySelectorAll .
Para la creación de un nuevo elemento li , el fragmento contiene una función separada appendLi . Utiliza insertAdjacentHTML y una cadena de plantilla para agregar el nuevo li .
La función replaceAllLiText contiene el bucle para cambiar el texto de todos los li en el ul .
const appendLi = (ul, text) => ul.insertAdjacentHTML(`beforeend`, `<li>${text}</li>`); // │ ^┍ the html to append, // │ │ using a template string // │ ┕ to inject [text] // ┕ add the html last within [ul] const replaceAllLiText = (ul, nwText) => ul.querySelectorAll(`li`).forEach(li => li.textContent = nwText); // │ ┕ set [li] text to [nwText] // ┕ loop all li's within [ul] const ul = document.querySelector(`ul`); // append a new li-element with text to the ul appendLi(ul, `this is new Li (wait a sec...)`); // wait two seconds, then change the text of all li's setTimeout(() => replaceAllLiText(ul, `This is working`), 2000); <ul> <li>foo</li> <li>bar</li> <li>bar</li> </ul>`