Question

我正在尝试从facebook dom获取Feed内容。

<div role="feed">

所以我这样做了：

querySelectorAll($("div[role='feed']"))

像这样： range 但它会返回未结果。我尝试了一些更类似的方法，但仍然可以解决问题。

有可能获得这些数据吗？谢谢

Answer 1

请删除$。它不是必需的，可能会引发undefined错误。页面加载后你是否正在运行？您使用.innerHTML来获取HTML内容吗？这对我有用：

＆＃13;

<div role="feed">Hello</div>
<script>
console.log(document.querySelector('div[role="feed"]').innerHTML);
</script>

＆＃13;

如果您在页面加载后没有运行，请将代码放在onload对象的window事件中。

您应该以这种方式更改代码：

＆＃13;

<script>
// Loading script before element.
window.onload = function () {
  console.log(document.querySelector('div[role="feed"]').innerHTML);
}
</script>
<div role="feed">Hello</div>

＆＃13;

如果您在元素之前加载脚本，则此方法有效。

Answer 2

使用jQuery，您不需要querySelectorAll()来获取您可以使用$("div[role='feed']")实现此目标的DOM。由于您使用querySelectorAll()，因此它接受必须是有效CSS选择器字符串的字符串;如果不是，则抛出SyntaxError异常。由于您使用了错误的语法，因此返回undefined。

你需要text()函数来获取jQuery中div的内容。 text()获取匹配元素集合中每个元素的组合文本内容，包括其后代，或者设置匹配元素的文本内容。

＆＃13;

console.log($("div[role='feed']").text());
console.log($("div[role='feed']"));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="feed">
so i did that:
</div>

＆＃13;

Answer 3

您正在混合使用JavaScript和jQuery。

您不需要$()使用.querySelectorAll()
您不需要.querySelectorAll()使用$()

您可以执行以下任一操作，选择div role="feed"：

＆＃13;

let divs_js = document.querySelectorAll("div[role='feed']");
console.log('Elements matched:', divs_js.length);

let divs_jq = $("div[role='feed']");
console.log('Elements matched:', divs_jq.length);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="feed"></div>
<div role="not-feed"></div>
<div role="feed"></div>
<div role="feed"></div>
<div role="not-feed"></div>

＆＃13;

⋅ ⋅ ⋅

以下是获取内容的示例：

＆＃13;

console.log("Using JS:");
let divs_js = document.querySelectorAll("div[role='feed']");
divs_js.forEach(function(elm){
  console.log(elm.innerHTML); // or .innerText, according to your needs
});

// ----------------------
console.log("---------");
console.log("Using jQ:");
let divs_jq = $("div[role='feed']");
$(divs_jq).each(function(){
  console.log($(this).html()); // or .text(), according to your needs
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="feed">feed 1</div>
<div role="not-feed">not feed 1</div>
<div role="feed">feed 2</div>
<div role="feed">feed 3</div>
<div role="not-feed">not feed 2</div>

＆＃13;

希望它有所帮助。

如何通过角色javascript获取div内容

3 个答案: