查詢選擇器不適用於模板文字

Question

我有一個腳本可以渲染一些 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 }

現在，我正在嘗試使用 class 標簽對每個 div 上的所有孩子進行 select。 所以我可以稍后循環它們並只渲染具有特定內容的卡片。

這是該片段：

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

但它返回未定義，我不知道是否使用模板文字規則會改變 DOM。 我嘗試了事件監聽器 DOMContentLoaded 但似乎沒有用。 我還嘗試了長度屬性以查看 id 有什么回來，但我得到的只是 0。謝謝

Answer 1

querySelectorAll()返回 html 元素的列表。 所以它沒有任何children財產。 您將不得不遍歷所有元素然后獲取子元素。 如果你想要所有元素的孩子，當你可以使用flatMap()

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