使用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循環內提醒投票內容時，我可以訪問這些信息。當我試圖從循環外面做它時，它根本不起作用。我不明白爲什麼。

來源

2011-02-14 Juniperus

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

    } 

}

來源

2011-02-14 11:44:23 Thai

使用Javascript在特定標記內選擇標記

回答

相關問題