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

我想将li对象作为具有js-stream-item stream-item stream-item类的列表或如何解析具有类<ol>的{{1}}

为什么stream-items js-navigable-stream不起作用？如何将li对象作为列表？

Answer 1

使用queryselector，如下所示：

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

这样说：使用类js-stream-item和stream-item绘制ul标记内的所有li元素。

Answer 2

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

如何从html解析li

2 个答案: