今天我们学习的内容是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进入审查元素）
在水印处右键审查元素定位到水印代码处、
我们获得了这句话
<div class="spv-logo" style="display: block; background-image: url("
"); 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>
这句话的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';});
我们就会发现水印已经没了