Javascript - 从数组中查找所有类，从类中获取并返回内部文本

Posted 2023-05-07

【中文标题】Javascript - 从数组中查找所有类，从类中获取并返回内部文本

【英文标题】：Javascript - find all classes from array, grab and return inner text from classes

【发布时间】：2013-11-24 01:09:27

【问题描述】：

我有一组要在页面中搜索的类名。然后我想找到所有这些元素，抓取里面的文本，并将其附加到一个 div 中。

var div = document.createElement('div');
div.innerhtml = 'List of names from this page';
document.body.appendChild(div); 

var classNameArray = ['user', 'username', 'fullname', 'profile-field', 'author', 'screen-name'];

for (var i = 0; i < classNameArray.length; i++) 

  element = classNameArray[i];
  getSuggestedAuthors(element);

  function getSuggestedAuthors(element) 
    var classes = document.getElementsByClassName(element);
    var index;
    for (var index = 0; index < classes.length; index++) 
      var class = classes[index];
      var textInsideClass = class.innerHTML;
      div.appendChild(textInsideClass);
    
  

当我运行它时，它给了我：

Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

我相信问题出现在var textInsideClass = class.innerHTML，因为当我删除它时，它只是抓取所有类并将它们附加到 div。但是，我只想获取类中的文本。

谁知道如何做到这一点没有jQuery？我通过 Google Chrome 的executeScript injection 注入了这个 hs。

非常感谢！

【问题讨论】：

像a,b,c,d,e,f,g 这样的变量名并不能真正帮助理解您的代码...

是的，但它们会帮助您赢得混淆代码竞赛。

真的吗？我发现这样更容易理解我的代码，但为了清楚起见，我将重命名：p

"我发现我更容易理解我的代码" 目标是让其他人理解你的代码。

另外，有些变量似乎没有用var 定义。它们是在另一个范围内定义的吗？不知道看起来有点混乱

【参考方案1】：

我认为您的问题是 appendChild 仅适用于节点。使用类似于a.innerHTML += f.innerHTML 的内容附加到innerHTML 可能会更好。

您还应该确保将 getSuggestedAuthors 函数移出循环。它可以正常工作，但最好不要在循环内声明函数。

【讨论】：

你是对的！效果很好，谢谢……是的，我真的应该这样做。

【参考方案2】：

如果你只需要支持 chrome，那么 Array.prototype 上所有方便的方法都应该存在:)

var a = document.createElement('div');
a.innerHTML = 'List of names from this page';
document.body.appendChild(a); 

function getSuggestedAuthors(elements) 
  for (var d = 0; d < elements.length; d++) 
    a.appendChild(document.createTextNode(elements[d].innerText));//append loop items text to a
  

['user', 'username', 'fullname', 'profile-field', 'author', 'screen-name'].map(function(cls) 
  return document.getElementsByClassName(cls);
).forEach(getSuggestedAuthors);

【讨论】：

如果你使用forEach和map，你还不如直接使用[].forEach.call(document.querySelectorAll(classes), fn)

啊，我的错 - 这是用于 Chrome 扩展注入，所以 forEach 也不起作用。我开始尝试这样做，但控制台给了我类似“no method forEach”之类的东西

@Michelle for each 在所有版本的 chrome afaik 中都受支持，因此对于扩展注入应该没问题kangax.github.io/es5-compat-table/#Array.prototype.forEach