审查元素找不到创建的元素_审查元素实操之去除优酷水印

今天我们学习的内容是Document 对象和forEach循环函数

我们用到的是

document.querySelectorAll(".spv-logo").forEach(function(item,index,arr){item.style.display='none';});

接下来我们来逐段剖析这段代码

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。

然后是forEach由我来给大家讲解下为什么用forEach而不是for

foreach也叫增强for循环

foreach其实是for循环的一个特殊简化版

for(元素类型 元素名称 ： 遍历数组(集合)(或者能进行迭代的)){语句}

这是forEach代码的写法

这样能看懂这段代码了嘛

那我们开始实战把

我们打开优酷进入审查元素 先看.spv-logo这句话是怎么来的

(F12进入审查元素)

在水印处右键审查元素定位到水印代码处、

我们获得了这句话

"); opacity: 1; right: 28px; top: 28px; width: 134px; height: 28px; background-size: 134px 28px; background-position: 0px 0px;" data-spm-anchor-id="a2h0j.11185381.0.i4">

这句话的div class定义为spv-logo 现在知道spv-logo是怎么来的了吗

也就是在这里我们知道了

因为我们要用document读取整个网站的审查元素

用querySelectorAll定位.spv-logo

那我们的代码怎么写啊 是不是

document.querySelectorAll(".spv-logo").

对 聪明 那我们继续 我们已经知道了水印的class接下来怎么办啊

当然是foreach先写循环用function声明函数

forEach(function到这里了

item() 方法返回一个节点列表中指定索引的节点。

index 属性可返回下拉列表中选项的索引位置。

arr 数组名字

style 属性将覆盖任何全局的样式设定style 属性将覆盖任何全局的样式设定

我们用它来覆盖LOGO

用display 属性规定元素应该生成的框的类型。

none更简单了 返回空 也就是全是空的

那么完整的代码就出来了

document.querySelectorAll(".spv-logo").forEach(function(item,index,arr){item.style.display='none';});

接下来

进入Console

有代码输入位

在代码输入为输入

document.querySelectorAll(".spv-logo").forEach(function(item,index,arr){item.style.display='none';});

我们就会发现水印已经没了