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

问题描述：

我有两个问题，一个小的用于我想拼凑的chrome脚本。目标是从论坛中查找和整理信息。的HTML的结构是类似以下内容：使用Javascript在特定标记内选择标记

<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-loop之外。当我在for循环内提醒投票内容时，我可以访问这些信息。当我试图从循环外面做它时，它根本不起作用。我不明白为什么。

使用JavaScript库。它会为你节省很多工作。我推荐jQuery。 – 2011-02-14 11:00:58

您不应该使用`for in`循环遍历`nodeList` - 请参阅：https：//developer.mozilla.org/En/DOM/NodeList – 2011-02-14 11:03:06

答

首先，使用的是for (item in collection)构建体在一个阵列或类似阵列的（在这种情况下节点列表）对象，这是您的错误的主要原因。

这不是正确的做法，并且在迭代到length属性时会给出错误，该属性是数字而不是元素。

而是，您需要使用for循环或将其转换为数组，然后将其转换为forEach。
您存储votes数组里面，但你使用它像一个关联数组，你应该将它们存储在一个对象，而不是。

请注意，您可以使用[]来创建一个新的Array并创建一个新的对象{}。我之所以提到这是因为你使用了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; 
     } 

    } 

}

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

相关推荐