如何從html解析li

Question

我們假設我想創建一個解析twitter帳戶的擴展。 我的manifest.json是;

{ 
"manifest_version": 2, 

"name": "Twitter", 
"description": "Stackoverflow", 
"version": "1.0", 

"browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
}, 
"permissions": [ 
    "https://*/*", 
    "http://*/*" 
] 
} 

我的popup.js是;

function httpGet(theUrl, callback){ 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function(){ 
     if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
     callback(xmlhttp.responseText); 
     } 
    } 
    xmlhttp.open("GET", theUrl, true); 
    xmlhttp.send(); 
} 

window.onload = function(){ 
    httpGet("https://twitter.com/StackCareers",function(result) { 
    var el = document.createElement('html'); 
    el.innerHTML = result; 
    console.log(el.querySelector('.js-stream-item stream-item stream-item')); 
    }); 
} 

我想李對象爲具有類js-stream-item stream-item stream-item要不我怎麼能解析<ol>具有類stream-items js-navigable-stream

爲什麼el.getelementsbyclassname不起作用列表？如何將li對象作爲列表？

Answer 1

使用querySelectorAll選擇元素，並使用Array.from投/轉換array-like-object到陣列中使用的Array#方法。

function httpGet(theUrl, callback) { 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     callback(xmlhttp.responseText); 
    } 
    }; 
    xmlhttp.open("GET", theUrl, true); 
    xmlhttp.send(); 
} 

window.onload = function() { 
    httpGet("https://twitter.com/StackCareers", function(result) { 
    var el = document.createElement('html'); 
    el.innerHTML = result; 
    var allLiElems = el.querySelectorAll(".stream-items.js-navigable-stream li p"); 
    Array.from(allLiElems).forEach(function(elem) { 
     console.log(elem.textContent); 
    }) 
    }); 
} 

Answer 2

使用queryselector如下：

var all=document.querySelector("ul>li.js-stream-item.stream-item"); 

這是說：漆UL標籤內的所有li元素與類JS流項目和流項目。