The children property vs the querySelectorAll property in this scenario.

Question

Would it not be safer to use - const lis = listUl.querySelectorAll('li'); - over using - const lis = listUl.children - due to the fact if you add any children elements to <ul> in the future you could risk placing the 'down', 'up', and 'remove' buttons on them when you ran your code in the browser?

Answer 1 · 2017-07-12T20:38:04Z

July 12, 2017 8:38pm

Neither of these would cause the buttons to be affected by any elements added later.

But the big difference between them is that listUl.querySelectorAll('li') would collect all list elements, including ones that might be part of nested lists. But listUl.children would return only the list items that are direct children of the "listUI" element.

Answer 2 · 2017-07-12T23:27:21Z

July 12, 2017 11:27pm

Okay I see what you're saying with the querySelectorAll('li') it's almost like fishing for a huge fish with a decent sized net in the ocean but sometimes you will grab some other fish that are nested in the net as well. The listUl.children though seems like it would be troublesome and be affected if I wanted to add more direct children elements to the unordered list that were not <li> elements. For example:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <button id="toggleList">Hide list</button>
    <div class="list">
      <p class="description">Things that are purple:</p>
      <input type="text" class="description">
      <button class="description">Change list description</button>
      <ul>
        <button>hello</button>
        <li>grapes</li>
        <li>amethyst </li>
        <li>lavender</li>
        <li>plums</li>
      </ul>
        <input type="text" class="addItemInput">
        <button class="addItemButton">Add item</button>
    </div>
    <script src="app.js"></script>
  </body>
</html>

/*jshint esversion: 6 */

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description ');
const descriptionButton = document.querySelector('button.description');
const listUl = listDiv.querySelector('ul');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const lis = listUl.children;

function attachListItemButtons(li) {
    let up = document.createElement('button');
    up.className = 'up';
    up.textContent = 'Up';
    li.appendChild(up);

    let down = document.createElement('button');
    down.className = 'down';
    down.textContent = 'Down';
    li.appendChild(down);

    let remove = document.createElement('button');
    remove.className = 'remove';
    remove.textContent = 'Remove';
    li.appendChild(remove);
}

for (let i = 0; i < lis.length; i += 1) {
    attachListItemButtons(lis[i]);
}

addItemButton.addEventListener('click', () => {
    let ul = document.getElementsByTagName('ul')[0];
    let li = document.createElement('li');
    li.textContent = addItemInput.value;
    attachListItemButtons(li); //spits out the li with the buttons attached and class names!
    ul.appendChild(li);
    addItemInput.value = '';
});

If you run that code in the browser you will see that the button <button>hello</button> gains the same class attributes and text content as the other <li> children. Is there a way to make the .children property more specific and only choose "li" children and not the "button" child element of the unordered list? I read the whole documentation on the children property, I see since it is an HTML collection you can index through them like you would an array, so the solution would be to start the for loop off at an index of 1. This would solve the problem here but if I moved the button element to an index of [3] and not the start of the list, how would I specify it to only apply className and textContent? (My best guess would be to modify the function and conditionals so that it would only run if the children element is a <li> tag.

Answer 3 · 2017-07-13T01:52:38Z

July 13, 2017 1:52am

Awww I see I should have looked more into HTML documentations. I just assumed it was an appropriate scenario because it was running fine but then ran into errors in the HTML validator. So in the case of unordered lists (ul) that can only contain one type of children element (li) it's best to use .children property, but in the case of an element like <div> that can contain more than one type of children element (i.e. 'p' or 'h1') it would be wiser to reference your element with one of the many other selectors like query or getElement. Sorry for asking so many questions. I'm just now getting serious when it comes to learning programming, it's just all these concepts we are learning with Javascript seem to hide some more of the complexity and origins of programming. Sometimes I feel as if I'm learning down a route that is towards becoming a programmer, yet the journey has been foggy due to these newer languages hiding some of the original mechanics of programming since they are already built into the language. Do you think learning c++ would be a more suitable language if I really wanted to know the beginning of programming, how it all came together, and gain another perspective towards programming?

Welcome to the Treehouse Community

Looking to learn something new?

Jonathon Irizarry

Jonathon Irizarry

The children property vs the querySelectorAll property in this scenario.

3 Answers

Steven Parker

Steven Parker

Neither of these would cause the buttons to be affected by any elements added later.

Jason Anello

Jason Anello

Steven Parker

Steven Parker

Jonathon Irizarry

Jonathon Irizarry

Steven Parker

Steven Parker

Jonathon Irizarry

Jonathon Irizarry

Steven Parker

Steven Parker

Aakash Srivastav

Aakash Srivastav