js提取指定网站内容(如何用QuerySelector检测和获取任意HTML元素的方法())

　　js提取指定网站内容(如何用QuerySelector检测和获取任意HTML元素的方法())

　　QuerySelector() 是一种可以从 JavaScript 中检测和获取任何 HTML 元素的方法。虽然JavaScript一开始就有getElemenById()、getElemetnsByClasNamo()等方法来获取HTML元素，但是如果使用querySelector()，就可以在不知道id属性值、class属性值等的情况下，选择性地指定jQuery意义上的HTML元素.

　　简而言之，您可以使用 querySelector() 来检索任何 HTML 元素。

　　我们先来看看querySelector()的基本语法

　　通常 querySelector() 将在目标范围内执行。

　　document.querySelector( CSS选择器 )

　　在这种情况下，querySelector() 将在整个文档上执行。您可以通过为参数指定类似 jQuery 的 CSS 选择器来获取任何 HTML 元素。

　　需要注意的是，程序会在得到第一个匹配的 HTML 元素时结束。

　　换句话说，如果你想获取多个元素，你需要创建一个循环过程，或者使用我们稍后讨论的querySelectorAll()。

　　我们继续看看如何使用querySelector()？

　　获取带有 ID 和 Class 属性的 HTML 元素

　　例子如下

　　HTML

　　标题示例

<p id="test">内容示例</p>

　　JavaScript

　　var elem1 = document.querySelector(&#39;.sample&#39;);

var elem2 = document.querySelector(&#39;#test&#39;);

console.log(elem1);

console.log(elem2);

　　运行结果如下

　　可以看到 querySelector() 的每个参数都指定了一个 CSS 选择器。

　　这样，同样的 querySelector() 也可以根据参数指定方法获取任意的 HTML 元素。

　　从执行结果可以看出已经获取到元素。

　　我们来看看querySelectorAll()的使用

　　querySelectorAll() 可以获取多个 HTML 元素。

　　我们先来看看它的基本语法

　　document.querySelectorAll(CSS选择器)

　　这样，指定参数的方法和目标的范围与querySelector()相同。

　　最大的不同是你可以获得所有匹配的 HTML 元素！

　　由于 queryselector() 只能检索第一个匹配的元素，我们可以使用 querySelectorAll() 来获取多个元素。

　　我们来看一个具体的例子

　　HTML代码

列表１

列表２

列表３

　　在这个例子中，排列了多个列表元素。

　　要检索此列表的所有元素，您可以执行以下操作

　　JavaScript

　　var elem = document.querySelectorAll(&#39;.list&#39;);

console.log(elem);

　　在本例中，类属性值“list”被指定为 querySelectorAll() 的参数。

　　这将指定所有列表元素，因此可以获取所有列表项。

　　当然，您可以将“li”元素设置为原样，但要注意与其他列表元素的平衡。

　　querySelectorAll()得到的元素叫做NodeList，它存储了一个类似于数组的数据结构。

　　下面我们使用'forEach'一次处理一个元素，可以有效地重复处理数组。

　　var elem = document.querySelectorAll(&#39;.list&#39;);

elem.forEach(function(value) {

console.log(value);

})

　　运行结果如下

　　在这个例子中，使用 querySelectorAll() 获得的结果由 forEach 语句循环。

　　通过指定参数“value”，可以像上面的结果一样获得每个 HTML 元素。

　　注意：您可以对使用 querySelectorAll() 获取的 HTML 元素进行任意处理！

　　以上就是JavaScript中获取HTML元素的querySelector()方法的详细内容。更多信息请关注其他相关php中文网站文章！

　　免责声明：本文原创发表于php中文网。转载请注明出处。感谢您的尊重！如果您有任何疑问，请与我们联系