所以我使用 Puppeteer 從社交媒體中洗掉文本，我只想從帖子中洗掉文本，當我使用 chrome 開發人員工具讀取包含文本的 div 的類名是什么時，它總是顯示當我重新加載頁面但留在同一個帖子上時使用不同的類名（見圖）
但我注意到 div 類名總是以 結尾.text-content，有沒有辦法選擇一個只有類名結尾的 div？
我嘗試$像這樣使用選擇器：
document.querySelectorAll("[class$='text-content']")
是的，它找到了正確的 div，但是如果我嘗試使用.textContent或者.innerText它不起作用并且它回傳未定義。
我還嘗試從開發人員控制臺中選擇所有 div，然后查看是否可以使用此 div 的索引，但事實證明，每次重新加載頁面時索引也會更改
我在開發者控制臺中寫的：
document.querySelectorAll('div')
然后它給了我一個 div 陣列，但正如我所說，如果索引每次都更改，我不能使用它。
uj5u.com熱心網友回復：
為什么您的解決方案不起作用
Document.querySelectorAll將回傳一個 HTMLCollection（一個類似陣列的元素），因此訪問Node.textContent屬性將導致undefined，您應該單獨使用Document.querySelector或獲取第一個索引。
獲取單個元素
演示的作業示例：
document.querySelectorAll("[class$='text-content']")[0].textContent
顯示代碼片段
const content = document.querySelector("[class$='text-content']").textContent;
console.log(content)<div class="MuiBox-root jss1500 jss1169 js1499 text-content">This is the content</div>或者
document.querySelector("[class$='text-content']").textContent
顯示代碼片段
const content = document.querySelectorAll("[class$='text-content']")[0].textContent;
console.log(content)<div class="MuiBox-root jss1500 jss1169 js1499 text-content">This is the content</div>獲取所有匹配的元素
此外，如果您想獲得所有這些，您可以querySelectorAll在Array#forEach.
顯示代碼片段
const elements = document.querySelectorAll("[class$='text-content']");
Array.from(elements).forEach(element => console.log(element.textContent))<div class="MuiBox-root jss1500 jss1169 js1499 text-content">This is the content</div>
<div class="MuiBox-root jss1500 jss1169 js1499 text-content">This is the content 2</div>
<div class="MuiBox-root jss1500 jss1169 js1499 text-content">This is the content 3</div>
<div class="MuiBox-root jss1500 jss1169 js1499 text-content">This is the content 4</div>
<div class="MuiBox-root jss1500 jss1169 js1499 text-content">This is the content 5</div>
<div class="MuiBox-root jss1500 jss1169 js1499 text-content">This is the content 6</div>uj5u.com熱心網友回復：
您可以使用getElementsByClassName：
document.getElementsByClassName('text-content');
但請注意這會回傳一個HTMLCollection. 因此，您必須使用訪問器或迭代來獲取元素內容：
const elements = document.getElementsByClassName('text-content');
// using acessor
console.log(elements[0].innerText);
console.log(elements[1].innerText);
// or iterating
for (const element of elements)
console.log(element.innerText);<div class="something something text-content">aaa</div>
<div class="something something text-content">bbb</div>uj5u.com熱心網友回復：
你實際上很接近。
類由 表示。這些可以串在一起。因此，您刺在一起的那些隨機值是動態類。
關于它的用法，querySelector你可以看看這里：
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
有了這些知識，您就可以輕松獲取所需的元素。
// Since you need only the one class:
var elements = document.querySelectorAll(".text-content");
// Then you can get all of the elements matching.
for (let i = 0; i < elements. Length; i ) {
// And easily do what you want with each.
// Like getting or setting content.
elements[i].innerText = "updated content";
}<div class="text-content other another">
dummy content
</div>
<div class="text-content other">
dummy content
</div>
<div class="other another">
dummy content
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/524712.html