“是否有使用鼠标悬停元素查找浏览器内容文本的 JavaScript 函数？”答案

【问题标题】：“Is there an JavaScript function for finding the browser Content Text using mouse hover element?”“是否有使用鼠标悬停元素查找浏览器内容文本的 JavaScript 函数？”
【发布时间】：2023-04-05 18:53:01
【问题描述】：

我正在使用 Html css 和 JavaScript 创建 Google Chrome 扩展程序。我们如何使用带有鼠标悬停的 dom 访问浏览器内容文本我只能获取子元素的最后一个元素。我想如何获得任何 div 或 span 的中级子元素和子元素的第一个元素这是我的代码

window.addEventListener("mouseover", test);
function test() {
  document.body.onmouseover = event => {
      let childLen = event.target.childElementCount

    if (event.target.lastChild) {
      if (event.target.lastChild.innerHTML) {
        event.target.style.border = "solid";
        console.log(event.target.lastChild.innerHTML)
      }
    }
  };
}

这是我的 HTML 代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
  </head>
  <body>
       <table>
          <tbody>
            <tr>
              <td id="myButtonOne" >
                <i
                  class="fa fa-hand-pointer fa-lg handicon"
                  aria-hidden="true"
                ></i>
              </td>
              <td id="Title" >Title: </td>
              <td  >
                <i class="fa fa-check-circle tick "  id="removeOne" aria-hidden="true"></i>
              </td>
            </tr>
</tbody>
</table>
</body>
</html>

这是我的 manifest.json 文件代码

{
  "manifest_version": 2,
  "name": "React Extention",
  "author": "Muhammad Yousuf",
  "version": "1.0.1",
  "options_page": "index.html",
  "description": "Replace new tab screen with GitHub trending projects.",
  "web_accessible_resources": ["index.html"],
  "incognito": "split",
  "icons": {
    "16": "logo.png",
    "48": "logo.png",
    "128": "logo.png"
  },
  "content_scripts": [
    {
     "matches": ["*://*.dawn.com/*"],
      "js": ["content-script.js"]
    }
  ],
  "browser_action": {
    "default_title": "Extention"
  },
  "background": {
    "scripts": ["background.js"],
    "presistent":false
  },
 "content_security_policy": "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; object-src 'self'",

  "permissions": ["tabs", "http://*/*", "storage","activeTab"]

}

【问题讨论】：

我们如何在鼠标悬停时访问任何 div 的中级子文本
@Snow meta.stackoverflow.com/questions/382850/…
没有看到 HTML，很难准确地说，但您可以从 event.target.innerHTML 或 event.target.textContent 开始。
好的，我在这里向您展示我的 html 和清单文件代码
我在@Teemu上面贴了html和manifest.json文件代码

标签： javascript html dom google-chrome-extension

【解决方案1】：

试试这个鼠标悬停并找到浏览器内容文本


// Previous dom, that we want to track, so we can remove the previous styling.
var prevDOM = null;

// Mouse listener for any move event on the current document.
document.addEventListener('mouseover', function (e) {
 var srcElement = e.srcElement;
 console.log('srcElement',srcElement.nodeName.trim());


 // Lets check if our underlying element is a DIV.
 if (srcElement.nodeName == 'SPAN' || srcElement.nodeName == "P" || srcElement.nodeName == "H1" || srcElement.nodeName == "H2" || srcElement.nodeName == "H3" || srcElement.nodeName == "H4" || srcElement.nodeName == "H5" || srcElement.nodeName == "H6"  || srcElement.nodeName == "UL"  || srcElement.nodeName == "LI"  || srcElement.nodeName == "A"  || srcElement.nodeName == "OL" ) {
   if(srcElement.textContent){
    // console.log('srcElement',srcElement.textContent);
     //console.log('srcElement length',srcElement.textContent.length);
     let selectedText = srcElement.textContent.toString()
     if(srcElement.textContent.length > 1){
       let message = {
         text: selectedText
       };
       chrome.runtime.sendMessage(message);


   // For NPE checking, we check safely. We need to remove the class name
   // Since we will be styling the new one after.
   if (prevDOM != null) {
     prevDOM.classList.remove(MOUSE_VISITED_CLASSNAME);
   }

   // Add a visited class name to the element. So we can style it.
   srcElement.classList.add(MOUSE_VISITED_CLASSNAME);

   // The current element is now the previous. So we can remove the class
   // during the next iteration.
   prevDOM = srcElement;
 }
}
 }
}, false);```

【讨论】：

看看这个有用