使用 Javascript 选择特定标签内的标签

Question

我在尝试将 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>

我只想获取 中的重要消息。并将其与说出这句话的用户联系起来。重要消息还应该包含特定的字符串，但这不是这里的问题。为此，我找到所有 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
}

好的，这确实有效。但我的浏览器（即 Chrome）在我显示它时说它是一个错误。 有没有更好的方法从特定标签中选择标签？

下一个问题是，由于某种原因，保存的数组似乎没有保存在 for 循环之外。 当我在 for 循环中提醒投票内容时，我可以访问该信息。当我尝试从循环外部执行此操作时，它根本不起作用。我不明白为什么。

Answer 1

• 首先，您在数组或类似数组（在本例中为 NodeList）对象上使用 for (item in collection) 构造，这是导致错误的主要原因。

  这不是正确的方法，并且当您迭代到 length 属性时会出现错误，该属性是一个数字，而不是一个元素。

  相反，您需要使用 for 循环或将其转换为数组，然后对其进行 forEach。

• 您将投票存储在数组中，但您将其用作关联数组，因此您应该将它们存储在对象中。

  请注意，您可以使用 [] 创建新数组，使用 {} 创建新对象。我提到这一点是因为您使用了 new Array()。

• 使用querySelector和querySelectorAll可以让你的代码更短一些！您正在创建一个 Chrome 用户脚本，Chrome 已经支持它。

所以这里有一个改进的代码，它更具可读性并且更有效。 jsFiddle

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;
        }

    }

}