尝试使用chrome控制台javascript/jquery获取内部元素

嗨，我正试图使用chrome控制台获取内部元素，但它给我带来了一个错误，这是我的代码片段。任何解决方法都将真正帮助我获取元素并使其自动化。我附上了一个常见网站的截图

当我这样做时，我得到的是类元素列表（即swatches-wrap）作为一个数组

$$(`.swatches-wrap`);

当我尝试此操作时，它会向我抛出一个错误未捕获类型错误：$$（…）[0]。$不是函数

$$(`.swatches-wrap`)[0].$(`.title`);

这是附加的屏幕截图

$（“.swatches wrap”）[0]。查询选择器（“.info”）

• 返回第一个找到的元素

• 如果未找到，则返回

  null

您也可以链接它，除非它是

null

：

$（“.swatches wrap”）[0]。查询选择器（“.info”）。查询选择器（“.something”）

也许您可以试试

$($(".swatches-wrap")[0]).children(".title")

不同之处（以堆栈页面为例）：

如果你用这个↓, 将获得DOM

$（“.li”）[0]

如果你用这个↓, 将得到一个对象

$（“-img_glyph”）

---

$

和

$$

是chrome（）

$

是指向

document.querySelector

的快捷方式，并返回与查询匹配的第一个元素。默认情况下，它从根元素（

body

）开始，并且可以通过提供第二个参数来覆盖根元素

$

是指向

[…document.querySelectorAll（'some query'）]

的快捷方式，并返回与查询匹配的元素数组。默认情况下，它从根元素（

body

）开始，并且可以通过提供第二个参数来覆盖根元素

对于您的示例，这应该是一种更好的方法，同时也是如何使用根参数的示例：

$('.title',$('.swatches-wrap'))

由于CSS选择器的工作方式，执行示例的最有效方法是

$('.swatches-wrap .title')

如果要在

中查找多个
.title
标记，请使用样例包装
元素：

$$('.swatches-wrap .title').forEach( elem => {
    console.log('found another `.swatches-wrap .title` ', element)
})

重要的是要记住，这些是实用功能，它们只存在于chrome控制台中。如果要在代码中使用它，应使用以下示例：

document.querySelectorAll
返回一个类似数组的对象，可以通过将其扩展为新数组将其转换为数组。这就是
[…]
所做的

最后，如果您想在代码中获得相同的
$
和
$
实用程序，您不必使用jQuery，您只需将其放入代码中，然后像上面的示例中那样使用
$
和
$
：

// $ polyfill
const $ = document.querySelector.bind(document)

// $$ polyfill
const $$ = (selector, root)=>[...document.querySelectorAll(selector,root)]

没有
标题
类内部我检查了可用的类，但它仍然给我带来了一个问题
// $ polyfill
const $ = document.querySelector.bind(document)

// $$ polyfill
const $$ = (selector, root)=>[...document.querySelectorAll(selector,root)]