Cookie-BOM-DOM

2022-05-25  本文已影响0人  咸鱼不咸_123

一、前言

二、Cookie

1.什么是Cookie

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

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

2.常见的属性

3.客户端设置Cookie

image-20220524101246801.png image-20220524101430539.png

4.cookie的缺点

三、认识BOM

1. window

1.1 window作为全局对象
1.2 window作为浏览器窗口对象

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

2. location

它是放在window对象上的。

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

2.1 location常见属性

2.2 location常见方法

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

image-20220524145719739.png

3.history

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

四、DOM

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

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节点

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等一些对象模型。

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

如何进行事件监听呢？

6. 认识事件流

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)]

上一篇 下一篇

猜你喜欢

热点阅读