DevTools 函数使用，获取页面元素

浏览器控制台使用方法：

https://developer.chrome.com/docs/devtools/console/utilities?hl=zh-cn

 

$()  是document.querySelector() 函数的快捷方式；

 

 

 

比如：
<input class="el-input__inner" type="text" autocomplete="off" placeholder="Please enter your account">

获取placeholder值
$('input',document.querySelector('el-input__inner')).placeholder
或者
$('input',$('el-input__inner')).placeholder

 $$() 会返回与给定 CSS 选择器匹配的元素数组。此命令等同于调用 Array.from(document.querySelectorAll())。

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}

 

let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}

 

$x("//input")

 $x("//p[a]")   会返回包含 <a> 元素的所有 <p> 元素：

 

属性：//*[@id="app"]
部分属性值：//*[contains(@id,'xx')]
文本内容（可以是标签里面的文本内容，*可写成具体标签，比如span/div）：//*[text()='xx']
部分文本内容： //*[contains(text(),'xx')]