使用Javascript在特定标记中选择标记

我有两个关于chrome的小用户脚本的问题，我正试图把它们放在一起。 我们的目标是从一个论坛中找到并整合信息。 html的结构类似于以下内容：

<div class="wrapper">
 <div class="cfInnerWrapper">
  <div class"inner" title="user1">user1</div>
  <div class="cfMessage">
   <div class="message">  
    This is a message. <strong>the important information 1</strong>
   </div>
  </div>
 </div>
</div>
<div class="wrapper">
 <div class="cfInnerWrapper">
  <div class"inner" title="user2">user2</div>
  <div class="cfMessage">
   <div class="message">  
    This is a message. <strong>the important information 2</strong>
   </div>
  </div>
 </div>
</div>

用户1
这是一条信息重要信息1
用户2
这是一条信息重要信息2

我只想获取中的重要消息，并将其连接到用户。重要消息还应包含特定字符串，但这不是问题。我通过查找所有的cfInnerWrapper来实现这一点，然后逐个检查它们以选择重要的消息用户对，并将它们保存在一个数组中

这是我的JS：

window.onload = function(){
 var find_str = /important/mi;
 var votes = new Array();
 var message = document.getElementsByClassName('cfInnerWrapper');
 for (m in message){
  var strong_element = message[m].getElementsByTagName('strong'); <---- Error
  if(strong_element){
   var strong_content = strong_element[0].innerHTML;
   if(strong_content.match(find_str)){
    var message_user = message[m].getElementsByClassName('inner')[0].getAttribute('title');
    votes[message_user] = strong_content;
   }
  }
  alert(votes['user1']); <--- Works
 }
 alert(votes['user1']); <--- Doesn't work
}

window.onload=function（）{
var find_str=/important/mi；
var投票=新数组（）；
var message=document.getElementsByClassName（'cfInnerWrapper'）；
对于（消息中的m）{
var strong_element=message[m].getElementsByTagName（'strong'）；

首先，在数组或类似数组（在本例中为NodeList）的对象上使用
for（集合中的项）
构造，这是导致错误的主要原因

这不是正确的方法，当它迭代到
length
属性时，会给您带来错误，该属性是一个数字，而不是一个元素

相反，您需要使用
for
循环或将其转换为数组，然后在其上使用
forEach

您正在数组中存储投票，但如果将其用作关联数组，则应将其存储在对象中

请注意，您可以使用
[]
创建一个新数组，也可以使用
{}
创建一个新对象

使用
querySelector
和
queryselectoral
可以缩短代码！您正在创建一个Chrome用户脚本，Chrome已经支持它了


因此，这里有一个改进的代码，它更具可读性，更有效

var messages=document.querySelectorAll（'.cfInnerWrapper'），
投票={}，
模式=/important/i；
//对于每条消息
对于（var i=0；i
使用JavaScript库。这将为您节省大量工作。我建议使用jQuery。您不应该使用
for in
循环来迭代
节点列表
-请参阅：@NathanMacInnes Chrome用户脚本不支持
@require
，包含一个90+kb的库只是为了进行一些简单的DOM遍历，这有点过分，不是吗谢谢你的评论。我也喜欢jQuery，并会努力学习它。我在这里选择了普通的js，没有任何理由。我将要使用它的网站实际上已经导入了jQuery，所以我想我可以使用它。我只是还没有真正的技能。@Yi Jiang，抱歉我没有正确地阅读这个问题。谢谢。完美的执行激动！
var messages = document.querySelectorAll('.cfInnerWrapper'),
    votes = {},
    pattern = /important/i;

// for each message
for (var i = 0; i < messages.length; i ++) {

    var message = messages[i],
        user = message.querySelector('.inner[title]'),
        strong = message.querySelector('strong');

    // check that the elements exist
    if (user && strong) {

        var userName = user.getAttribute('title'),
            content = strong.innerHTML;

        // check if it matches the pattern
        if (pattern.test(content)) {
            votes[userName] = content;
        }

    }

}