Javascript 查询选择器不处理模板文本

我有一个脚本，呈现一些HTML内容，如下所示

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 }

但是它返回undefined，我不知道使用模板文本是否会改变DOM的规则。我尝试了事件侦听器DOMContentLoaded，但似乎不起作用。 我还尝试了length属性以查看id是否有任何返回，但得到的结果是0。 谢谢

queryselectoral（）

返回html元素列表。因此它没有任何

子属性。您必须循环所有元素，然后获取子元素。如果需要所有元素的子元素，则可以使用
flatMap（）

因为html集合没有子项。这是有道理的，我只是不明白为什么在flatMap方法之后它返回一个空数组。这里有我遗漏的东西吗？@ChristianPerez它不应该返回空数组。请制作一个片段来说明问题，谢谢您的时间。
selector = () => {
const tagName = document.querySelectorAll('.tags').children;
console.log(tagName)}

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