如何通过关键字查找特定的 HTML 元素？答案

【问题标题】：How to find specific HTML element by keyword?如何通过关键字查找特定的 HTML 元素？
【发布时间】：2022-10-19 21:11:44
【问题描述】：

我在使用关键字时如何找到特定的 HTML 元素时遇到问题：

<div class="col-sm-6 col-md-6 col-lg-4">
    <div class="ct-itemProducts ct-u-marginBottom20" >
        <div class="ct-main-content">
        
            <div class="ct-main-text" >
                
                <div class="ct-product--tilte">
                    COMPUTIME
                </div>

我的关键字是COMPUTIME，我想检测这个div的className：

<div class="col-sm-6 col-md-6 col-lg-4">

【问题讨论】：

标签： javascript html parsing dom beautifulsoup

【解决方案1】：

你可以用 JavaScript 试试这个：

for (const a of document.querySelectorAll(".ct-product--tilte")) {
  if (a.textContent.includes("COMPUTIME")) {
  console.log(a.textContent)
  }
}

【讨论】：

【解决方案2】：

据我了解，您想通过在 div 中搜索 TEXT 来获取元素类，然后您可以尝试以下操作：

var allElement = document.querySelectorAll('*');
var myElement = null;

var valueToSearch = "COMPUTIME"; 

allElement.forEach(el => {
  if(el.innerHTML.trim() === valueToSearch) {
    myElement = el;
  }
})

console.log(myElement) // My element HTML
console.log(myElement.className) // My Class 
console.log(myElement.id) // My id

var parentSearching = true;

while(parentSearching) {
  myElement = myElement.parentElement;
  if (myElement.className.includes('col')) {
    parentSearching = true;
    break;
  }
}

console.log(myElement.className); // col-sm-6 col-md-6 col-lg-4

<div class="col-sm-6 col-md-6 col-lg-4">
  <div class="ct-itemProducts ct-u-marginBottom20" >
    <div class="ct-main-content">
      <div class="ct-main-text" >
        <div class="ct-product--tilte">
          COMPUTIME
        </div>        
      </div>
    </div>
  </div>
</div>

【讨论】：

谢谢，但我想自动检测该课程。 link 是我正在检查的页面，你会明白的
希望我的编辑对您有所帮助并解决您的问题
谢谢你的帮助，但我的问题是我不知道“col-sm-6 col-md-6”这个类，所以我不能做 .includes('col') 我希望它不会被自动检测到
你有一些资料吗？他一直是第四个父母，他一直都有xxx课，或者其他信息？因为在其他情况下我们无法为您提供更多帮助
我所说的复杂性。作为输入我有“ct-product--tilte”和作为输出“<div class="col-sm-6 col-md-6 col-lg-4">”