Cookie-BOM-DOM

一、前言

• Cookie：Storage用于客户端，cookie用在服务器端，一般cookie不是由客户端设置的，而是由服务器设置的。浏览器发送请求的时候，会自动将cookie带过去的。

• BOM：可以通过js操作BOM从而来操纵浏览器。

• DOM：是操作浏览器的一些文档

二、Cookie

1.什么是Cookie

• Cookie（复数形态Cookies），又称为“小甜饼”。类型为“小型文本文件”，某些网站为了辨别用户身份而存储在用户本地终端（Client Side）上的数据。

  • 浏览器会在特定的情况下携带上cookie来发送请求，我们可以通过cookie来获取一些信息

• Cookie总是保存在客户端的，按在客户端的存储位置，Cookie可以分为内存Cookie和硬盘Cookie

  • 内存Cookie由浏览器来维护，保存在内存中，浏览器关闭时Cookie就会消失，其存在时间是短暂的。
  • 硬盘Cookie保存在硬盘中，有一个过期时间，由用户手动清理或者过期时间到时，才会被清理。

• 如何判断一个cookie是内存cookie还是硬盘cookie呢

  • 没有设置过期时间，默认情况下cookie是内存cookie，在关闭浏览器时会自动删除。
  • 设置过期时间，并且过期时间不为0或者负数的cookie，是硬盘cookie，需要手动或者到期时，才会删除。

在平常的开发中，一般不是由我们手动设置cookie的，而是由服务器进行设置的。会在响应头里面response headers的set-cookie。

在下次浏览器向客户端发送请求时，会自动将cookie设置在request header里面，不需要我们手动添加。

2.常见的属性

• cookie的生命周期

  • 默认情况下的cookie是内存cookie，也称之为会话cookie，也就是在浏览器关闭时自动被删除。
  • 我们可以通过设置expires或者max-age来设置过期的时间。
    • expires：设置的是Date.toUTCString()。设置格式是;expires=date-in-GMTString-format;
    • max-age：设置过期的秒钟，;max-age=max-age-in-seconds（例如一年为60x60x24x365）

• cookie的作用域：(允许cookie发送给哪些URL)

  • Domain：指定哪些主机可以接受cookie

    • 如果不指定，那么默认是origin，不包括子域名
    • 如果指定Domain，则包含子域名。例如，如果设置Domain=mozilla.org，则Cookie也包含在子域名中(如developer.mozilla.org)

  • Path：指定主机下哪些路径可以接受cookie

    • 例如设置Path=/docs/，则以下地址都会匹配：
      • /docs
      • /docs/Web/
      • /docs/Web/HTTP

3.客户端设置Cookie

• 可以在浏览器的两个位置来查看cookie

image-20220524101246801.png

image-20220524101430539.png

• 如何通过js代码删除cookie

  • document.cookie可以去拿浏览器的cookie，可以拿到浏览器本身设置的cookie，但是拿不到服务器设置的cookie

  • 但是我们可以去设置cookie

    document.cookie="age=18"
    

  • 如果我们想清空cookie呢

    document.cookie="";//这个其实清空不了cookie，只是给cookie设置了一个新的值
    

  • 真实如果想要删除某个cookie，是要重新设置cookie，并设置过期时间max-age=0

    document.cookie="age=12;max-age=0;"
    

4.cookie的缺点

• 将cookie附加到每一次的http请求中，其实某些请求是不需要进行携带，这在一定程度上会浪费用户的流量。
• cookie传递是明文传输的，存在一定的安全风险。
• cookie是有大小限制的，要求是4kb
• cookie验证登录，在客户端不能去设置对应的cookie

三、认识BOM

• JavaScript有一个非常重要的运行环境就是浏览器，而且浏览器本身又作为一个应用程序需要对其本身进行操作，所以通常 浏览器会对应的对象 模型(BOM,Browser Object Model)

  • 我们可以将BOM 看成是 连接JavaScript和浏览器窗口的桥梁。
  • BOM：主要包括以下的对象模型：
    • window：包括全局属性、方法，控制浏览器窗口相关的属性、方法
    • location：浏览器连接到的对象的位置(URL)
    • history：操作浏览器的历史
    • document：当前窗口操作文档的对象

• window对象在浏览器中有两个身份：

  • 身份一：全局对象

    • 我们知道ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global
    • 在浏览器中就是window对象

  • 身份二：浏览器窗口对象

    • 作为浏览器窗口对象，提供了对浏览器操作的相关的API

1. window

1.1 window作为全局对象

• 在浏览器中，window对象就是之前经常提到的全局对象，也就是我们之前提到过GO对象
  • 比如在全局通过var 声明的变量，会被添加到GO中，也就是会被添加到window上。
  • 比如window默认给我们提供了全局的函数和类：setTimeout、Math、Date、Object等。

1.2 window作为浏览器窗口对象

• 事实上window对象上肩负的重担是非常大的。
  • 第一：包含大量的属性，localStorage、console、location、history、screenX、scrollX等等（大概60+个属性）
  • 第二：包含大量的方法,alert、close、scrollTo、open等等（大概40+个方法）
  • 第三：包含大量的事件，focus、blur、load、hashchange等等（大概30+个事件）
  • 第四：包含从EventTarget继承过来的方法,addEventListener、removeEventListener、dispatchEvent方法

【window是一个对象，是由Window对象创建出来，这个类继承EventTarget】

• 查看MDN文档时，我们会发现有很多不同的符号，这里解释一下是什么意思？

  • 删除符号：表示这个API已经废弃，不推荐继续使用了。
  • 点踩符号：表示这个API不属于W3C规范，某些浏览器有实现（所以兼容性的问题）
  • 实验符号：该API是实验性特性，以后可能会修改，并且存在兼容性问题

• https://developer.mozilla.org/en-US/docs/Web/API/Window

• 事件参考：https://developer.mozilla.org/zh-CN/docs/Web/Events

2. location

它是放在window对象上的。

Location对象用于表示window上链接到的URL信息。

2.1 location常见属性

• 常见的属性
  • href：完整的url
  • protocol：当前的协议
  • host:主机地址
  • hostname：主机地址（不带端口）
  • port：端口
  • pathname：路径
  • search：查询字符串
  • hash：哈希值
• username：URL的username(很多浏览器已经禁用)
• password：URL的password（很多浏览器已经禁用）

2.2 location常见方法

我们会发现location是对URL的一个抽象实现。

image-20220524145719739.png

3.history

history对象允许我们访问浏览器曾经的会话历史记录。

• 有两个属性：

  • length：会话中的记录条数。
  • state：当前保留的状态值。

• 有5个方法

  • back()：返回上一页，等价于history.go(-1)
  • forward()：前进下一页，等价于history.go(1)
  • go()：加载历史中的某一页
  • pushState()：打开一个指定的地址，但是不刷新网页
  • replaceState()：打开一个新的地址，并且使用replace

四、DOM

浏览器是用来展示网页的，而网页中最重要的就是里面各种的标签元素，js很多时候需要操作这些元素的。

• js如何操作这些元素呢？通过Document Object MOdel（DOM，文档对象模型）。
• DOM给我们提供了一系列的模型和对象，让我们可以方便的来操作Web页面。

image-20220524195524098.png

1.继承了EventTarget相关方法

// * 一旦html被解析，就会生成一个document对象
document.addEventListener("click",()=>{
  console.log("document被点击了");
})

const box=document.querySelector("#box")
const span=document.querySelector(".content")

box.onclick=function(){
  console.log("div元素被点击了");
}

span.onclick=function(){
  console.log("span标签被点击了");
}

// * 点击事件会向上冒泡

2. node节点

• 所有的DOM节点类型都继承自Node接口。
  • https://developer.mozilla.org/zh-CN/docs/Web/API/Node

3. Document

Document节点表示的是整个载入的网页，我们来看一下常见的属性和方法。

// * 常见的属性
console.log(document.body);//body
console.log(document.title);//* 标题
console.log(document.head);//* 头部
console.log(document.children[0]);//* 拿到的是html标签

console.log(window.location==document.location);// *  true 它们是同一个对象的

// * 常见的方法
const imageEl=document.createElement("img")
const imageEl2=new HTMLImageElement();//* 这两种元素的创建方法是一样的  

// * 获取元素
/**
 * * getElementById:根据id获取标签元素
 * * getElementsByTagName：根据标签名获取标签元素，它是一个数组
 * * getElementsByName： 根据标签的name属性的值去获取标签元素，它是一个数组 
 * * querySelector：只获取第一个
 * * querySelectorAll：获取所有能获取到的，是一个数组
 */
const divEl1=document.getElementById("box")
const divEl2=document.getElementsByTagName("div")
const divEl3=document.getElementsByName("user");//* 根据标签的name属性的值去获取标签元素
const divEl4=document.querySelector(".content");//* 这个只获取第一个
const divEl5=document.querySelectorAll(".content");//* 这个是获取所有的

4. Element

我们平时创建的div、p、span等元素在DOM中表示为Element元素，我们来看一下常见的属性和方法

const divEl=document.querySelector("#box")

// * 常见的属性
console.log(divEl.id);
console.log(divEl.tagName);
console.log(divEl.children);
console.log(divEl.className);//* 字符串形式返回类名
console.log(divEl.classList);//* 以数组的形式返回类名
console.log(divEl.clientWidth); //* 盒子的内容宽度
console.log(divEl.clientHeight);//* 盒子的内容高度
console.log(divEl.offsetLeft);//* 外边距
console.log(divEl.offsetTop);//* 外边距

// * 常见方法  特有
console.log(divEl.getAttribute("age"));
divEl.setAttribute("height","1.88")

5. 认识事件监听

前面我们讲到了Javascript脚本和浏览器之间的交互，浏览器给我们提供了BOM、DOM等一些对象模型。

• 事实上还有一种需要和浏览器经常交互的事情就是事件监听
• 浏览器在某个时刻可能会发生一些事件，比如鼠标点击、移动、滚动、获取、失去焦点、输入内容等等一系列的事件。

我们需要以某种方式（代码）来对其进行响应，进行一些事件的处理。

• 在web当中，事件在浏览器窗口中触发，并且通过绑定到某些元素上或者浏览器窗口本身，那么我们就可以对这些元素或者window窗口来绑定事件的处理程序，来对事件进行监听。

如何进行事件监听呢？

• 事件监听方式一：在script中直接监听。
• 事件监听方式二：通过元素的on来监听事件。
• 事件监听方式三：通过EventTarget中的addEventListener来监听。

6. 认识事件流

• 事实上对于事件有一个概念叫做事件流，为什么会产生事件流呢？
  • 我们可以想到一个问题：当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身。
  • 这是因为我们的HTML元素是存在父子元素叠加层级的。
  • 比如一个span元素是放在div元素上的，div元素是放在body元素上的，body元素是放在html元素上的

6.1 事件冒泡和事件捕获

const spanEl=document.querySelector(".span")
const divEl=document.querySelector(".content")
spanEl.addEventListener("click",()=>{
  console.log("事件冒泡span元素被点击了");
})

divEl.addEventListener("click",function(){
  console.log("事件冒泡div元素被点击了");
})

document.body.addEventListener("click",()=>{
  console.log("事件冒泡body被点击了");
})

spanEl.addEventListener("click",()=>{
  console.log("span元素被点击了");
},true)

divEl.addEventListener("click",function(){
  console.log("div元素被点击了");
},true)

document.body.addEventListener("click",()=>{
  console.log("body被点击了");
},true)

// * 事件会进行事件冒泡，会一直往上冒泡，触发事件，直至到document对象上。从里往外传递
// * 可以传递第三个参数，如果为true，代表是进行事件捕获
// * 如果同时有事件捕获和事件冒泡,会先执行 事件捕获，再执行事件冒泡

7.事件对象

const spanEl=document.querySelector(".span")
const divEl=document.querySelector(".content")
spanEl.addEventListener("click",(event)=>{
  // event.stopPropagation();//* 阻止冒泡
  console.log("span元素被点击了",event.target);//* 发生点击的元素
  console.log("事件类型：",event.type);
  console.log("事件的元素：",event.currentTarget);//* 当前触发的元素

})
divEl.addEventListener("click",(event)=>{
  console.log("------------------分界线-------------");
  console.log("div元素被点击了",event.target);//* 发生点击的元素
  console.log("事件类型：",event.type);
  console.log("事件的元素：",event.currentTarget);//* 当前触发的元素
})

// * 阻止默认事件的触发
const aEl=document.querySelector("a");
aEl.addEventListener("click",(e)=>{
  e.preventDefault();//* 阻止默认事件
})

// * 阻止传递 stopPropagation 阻止事件捕获和事件冒泡 

五、总结

[图片上传失败...(image-e3c534-1653457502197)]