2023-5-17（第十一天）

BOM的常用对象

history对象

保存了当前窗口的历史记录

//前进
history.go(1);
​
//后退
history.go(-1);
​
//刷新
history.go(0);

location对象

保存了当前窗口正在打开的url

url的五个组成部分

• 协议

  • https（加密）、http、ftp（传输文件）、ws（直播）
  • 其中https和http属于请求-响应模型

• 主机号/ip地址/域名

  • 域名需要花钱买，主机号和ip地址是免费的
  • 主机号：127.0.0.1

• 端口号

  • https的默认端口是443
  • http的默认端口是80

• 文件的相对路径/路由

• 查询字符串

  • 前端传到后端的数据

属性

//1.协议
location.protocal
​
//2.域名
location.hostname
​
//3.端口号
location.port
​
//4.路由
location.pathname
​
//5.请求信息
location.search

方法

//跳转
location="新url";
​
//跳转后，禁止后退
location.replace("新url");
​
//刷新
location.reload();

DOM

查找元素（通过CSS选择器查找）

查找一个元素

let elem=document.querySellector("CSS选择器")
​
//特点：只能找到单个元素，如果匹配到多个，只会返回找到的第一个元素，没找到则返回null；

查找所有元素

let elems=document.querySellectorAll("CSS选择器")
​
//优点：1.找到的是一个集合，没找到返回空集合
       2.返回的是一个静态集合，可以用forEach遍历

document.getXXX和document.queryXXX的区别

0. 后者更适合复杂查找

1. 动态集合（HTMLCollection）和静态集合（NodeList）的区别：

   0. 动态集合：每一次DOM发生变化，都会再次查找页面元素，让页面和保存的数据保持一致
   1. 静态集合：页面和保存的数据不一致，支持forEach

操作样式

操作样式表

//获取样式表
let sheet=document.styleSheet[i];
​
//获取样式表中所有的样式规则     ----> 一个{}称之为一个规则
let rules=sheet.cssRules;
​
//获取具体的样式规则
let rule=rules[i];
​
//设置样式
rule.style.background="pink";

操作属性

获取属性值

elem.getAttribute("属性名")

设置属性值

elem.setAttribute("属性名","属性值")

删除属性

elem.removeAttribute("属性名")

判断有没有属性

elem.hasAttribute("属性名")

创建元素以及上树

创建空标签

let elem=document.createElement("标签名")

设置必要的属性和事件

elem.属性名="属性值";
elem.on事件名=function(){操作}

上树

• 末尾追加

  父元素.appendChild(elem)
  

• 插入

  父元素.insertBefore(elem,已有子元素)
  

• 替换

  父元素.replaceChild(elem,已有子元素)
  

删除元素

elem.remove();

拓展

input的两个专属事件

• onfocus获取焦点
• onblur失焦

创建变量新方法let

作用：

0. 解决了声明提前，需要先创建再使用
1. 带来了块级作用域：一个{}就是一个块，此变量只能在所属的{}里使用
2. 绑定事件时用let，会记录当前元素的下标，不再需要自定义下标

类数组对象转为数组

let arr=Array.from(类数组对象)