Query Selector not working on template literals

Question

I have a script that renders some HTML content and looks like this.

renderJobs = async () => {
const jobs = await getJobs();
const view = `
    ${jobs.map(companyName => `
        <div class="show">
            <div class="company-details">
                <p>${companyName.company}</p>
                <object type="image/svg+xml" data="${companyName.logo}"></object>
                <h3>${companyName.position}</h3>
                <p class="details">${companyName.postedAt} - ${companyName.contract} - ${companyName.location}</p>
            </div>
            <div class="tags">
                <p>${companyName.role}</p>
                ${companyName.languages.map(lang => `
                    <p>${lang}</p>
                `).join('')}
                <p>${companyName.tools}</p>
                <p>${companyName.level}</p>
                
            </div>
        </div>
    `).join('')}
`
return view }

Now, I'm trying to select all of the children on every div with the class tags. So I can later loop through them and render only the cards that have certain content.

Here is the snippet for that:

selector = () => {
const tagName = document.querySelectorAll('.tags').children;
console.log(tagName)}

But it returns undefined, I am not aware if using template literals the rules change for the DOM. I tried the event listener DOMContentLoaded but did not seem to work. I also tried the length property to see id there was anything coming back, but all I got was 0. Thank you

because an html collection does not have children. https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — epascarello, Dec 01 '20 at 03:53

score 1 · Accepted Answer · answered Dec 01 '20 at 03:59

1

querySelectorAll() returns a list of html elements. So it doesn't have any children property. You will have to loop over all the elements are then get the children. If you want all element's children when you can use flatMap()

const tagName = [...document.querySelectorAll('.tags')].flatMap(x => x.children);

answered Dec 01 '20 at 03:59

Maheer Ali

35,834
5
42
73

It makes sense, I just don't understand why after the flatMap method it returns an empty array. Is there anything I'm missing here? – Christian Perez Dec 01 '20 at 06:26
@ChristianPerez It shouldn't return empty array. Please make a snippet to show the problem – Maheer Ali Dec 01 '20 at 06:28
https://jsfiddle.net/vrnkeLsy/ Thanks for your time. – Christian Perez Dec 01 '20 at 17:44

Query Selector not working on template literals

1 Answers1