14day,15day-BOM,回顾

BOM

认识 BOM

• 全名：Browser Object Model：浏览器对象模型
  =》私人：一整套操作浏览器的属性和方法
  =》注意：BOM 不是 js 给的，是浏览器给我们的
  =》BOM 的规则就是浏览器制造厂商给我们的
  =》利用 js 的语法去操作浏览器的相关内容

• BOM 的顶级对象是 window

  • 所有和 BOM 相关的内容都是 window.xxxx
  • 在书写的时候，都可以省略 window 不写

浏览器的窗口尺寸

• 浏览器的可视窗口的宽度和高度
  • 语法：
  1. window.innerWidth
     =》获取的是宽度
  2. window.innerHeight
     =》获取的是高度
     注意：获取到的是包含滚动条在内的尺寸

浏览器的弹出层

• 浏览器设置了三种弹出层

1. alert：提示框

• 语法：window.alert(“文本内容”)；
• 表现：有一段文本，和一个确认按钮
• 返回值：没有

let res = alert("zd");
console.log(res); // undefined

2. prompt：输入框

• 语法：window.prompt(“提示文本内容”);
• 返回值：如果用户点击的是取消按钮，返回 null，如果点击的是确定，那就是输入的文本内容，如果什么都没输入，则返回一个空字符串
• 表现：一个输入框然后有两个选择框（取消与确定）

let res2 = window.prompt("请输入年龄");
console.log(res2);

3. confirm：选择框

• 语法：window.confirm(“文本内容”);
• 表现：比输入框少了一个输入的区域，同样有两个选择按钮
• 返回值：如果点击取消，返回 false，点击确定返回 true。

let res3 = window.confirm("今天zd很开心");
console.log(res3); // true/false

• 共同点：
  • 都会阻断程序的继续执行(执行到弹出层时才会阻止代码执行，在弹出层之前的代码不受影响)
  • 直到用户操作为止

console.log(456);
setTimeout(function () {
  console.log(789);
}, 1000);
let res3 = window.confirm("今天zd很开心");
console.log(res3); // true/false
console.log(123);
// setTimeout(function(){
//   console.log(789);
// },1000)

浏览器的地址栏

• 在 window 下有一个成员叫做 location 里面存储的都是和地址栏相关的内容

1. href：

• 是一个可读写的属性
• 读：
  • 语法：window.location.href;
  • 得到的就是当前页面的地址栏的完整信息
• 写：
  • 语法：window.location.href = “值”
  • 作用：把当前地址栏修改

console.log(window.location.href);
let btn = document.querySelector("button");
// 跳转页面
btn.onclick = function () {
  window.location.href = "http://baidu.com";
};

2. reload()

• 是一个方法，使用的时候需要加上()
• 语法：window.location.reload();
• 作用：把当前页面重新加载一次，刷新。

3. replace()

• 语法：window.location.replace(URL);
• 作用：将当前浏览器地址替换掉，调用这个方法的网页不会被写入浏览记录里面。

console.log(window.location.href);
let btn = document.querySelector("button");
// 跳转页面
btn.onclick = function () {
  window.location.href = "http://baidu.com";
  // window.location.reload();
  // window.location.replace("http://baidu.com")
};
console.log(window.location);

console.log(btn.toString());
console.log({}.toString());
// Array.prototype.toString = function(){
//   console.log(123);
//   return 456;
// }
console.log([1, 2, 3].toString());

let obj = {};
obj[btn] = 789;
console.log(obj[btn]);
console.log(obj);
console.log(obj[btn.toString()]);
console.log(obj["[object HTMLButtonElement]"]);

浏览器的历史记录

• window 下有一个成员叫做 history，里面储存的都是和历史记录相关的信息

1. 历史回退

• 语法：window.history.back();
• 作用：回到上一个历史页面
• 前提：您必须的有上一个页面，即当前页面是从某一个页面跳转过来的。
• 等价于浏览器上的 ⬅️ 按钮

2. 历史前进

• 语法：window.history.forward();
• 作用：去到下一个页面
• 前提：你必须得有一个下一个页面，当前页面是从某一个页面回退过来的
• 等价于浏览器上的 ➡️ 按钮

3. 历史跳转

• window.location.go(数字)
• 作用：进行历史跳转，根据数组不同进行不同的跳转
• 正整数：历史前进
• 0：重新打开当前页面（刷新页面）
• 负整数：历史回退

浏览器的标签页

• 操作标签页的方法

1. open()

• 语法：window.open(“地址”)
• 作用：开启一个新的标签页并且打开指定的地址网页

2. close()

• 语法：window.close()
• 作用：关闭当前标签页
• 注意：只能关闭用 open 方法打开的页面

浏览器的常见事件！！！

• 由浏览器的行为触发的事件

1. onload

• 语法：window.onload = function(){}
• 时机：页面所有资源还在完毕后触发
• 作用：当你把 js 代码书写在 head 内的时候，而且你还想要操作页面的元素，就需要 onload 事件。
• 注意：除了整个页面有加载完毕事件，图片/视频/音频也都有。

2. onresize

• 语法：window.onresize = function(){}
• 时机：页面可是窗口大小改变的时候触发，不管是宽度还是高度，只要改变了就会触发
• 作用：
  • 响应式布局
  • 在移动端判断横屏

拓展
获取当前浏览器的详细信息

• window.navigator

3. onscroll

• 语法：window.οnscrοll= function(){}
• 时机：页面滚动的时候触发
• 注意：不管是横向的还是竖向的，主要滚动了就会触发

浏览器卷去的尺寸

能够知道滚动了多少距离

• 分成了卷去的高度和宽度

卷去的高度

• 语法：document.documentElement.scrollTop
  =>当页面有 DOCTYPE 标签时使用
  document.body.scrollTop
  =>当页面没有 DOCTYPE 标签时使用

卷去的宽度

• 语法：document.documentElement.scrollLeft
  =>当页面有 DOCTYPE 标签时使用
• document.body.scrollLeft
  =>当页面没有 DOCTYPE 标签时使用

浏览器滚动到

• 对浏览器的滚动条进行定位
  =》其实就是设置浏览器卷去的高度/宽度

• scrollTo()

• 根据不同的参数去决定不同的表现形式

• 参数方案 1:
  =》传递数字
  =》语法：window.scrollTo(x,y)
  x 表示设置卷去的宽度
  y 表示设置卷去的高度

• 注意：如果传递的是数字，则必须传递两个参数

• 参数方案 2:
  =》传递一个对象数据类型
  =》语法：window.scroolTo({
  top:yyy,
  left:xxx,
  behavior:“smooth”
  })
  注意：如果传递一个对象可以只写一个值，同时可以直接设置平滑滚动，不需要额外的书写样式

获取尺寸合集
视口宽/高（不含滚动条）

• document.documentElement.clientWidth
• document.documentElement.clientHeight：
  视口宽/高（含滚动条）
• window.innerWidth/innerHeight
  网页文档/元素 总宽/高或者叫滚动的高度/宽度
• document.documentElement.scrollWidth
• document.documentElement.scrollHeight
  网页被卷去的宽/高
• document.documentElement.scrollTop
• document.documentElement.scrollLeft
  屏幕的宽/高
• window.screen.width
• window.screen.height

以下是对你提到的这些属性的解释：（ai 解析）

document.documentElement.clientWidth：
返回当前文档根元素的可视宽度，即视口的宽度（包括滚动条）。
document.documentElement.clientHeight：

window.innerWidth：
返回 当前 窗口的视口（viewport）宽度，即网页文档可见区域的宽度。如果存在滚动条，滚动条也会算在内。
window.innerHeight：

document.documentElement.scrollWidth：
返回 整个 文档的宽度，包括文档被隐藏的部分（被滚动条卷去的部分）。
document.documentElement.scrollHeight：
这两个属性返回的是网页文档的总宽度和总高度，无论文档是否有滚动条，都会包括滚动条被卷去的部分。

document.documentElement.scrollTop：
返回当前滚动条在垂直方向上滚动的距离，即页面向下滚动的量。
document.documentElement.scrollLeft：
返回当前滚动条在水平方向上滚动的距离，即页面向右滚动的量。
这两个属性返回的是滚动条被卷去的宽度和高度，表示页面滚动的位置。

window.screen.width：
返回当前屏幕的宽度（以像素为单位）。
window.screen.height：

回顾

DOM

• 全名：Document Object Model
• 一整套操作文档流的属性和方法
• DOM以树状结构出现，由节点组成
• DOM里面常见的几种节点：
  • 文本节点：文本内容，包含换行和空格
  • 元素节点：页面内的所有标签
    • html：是一个元素节点，但是是页面上最大的元素节点，叫做根元素节点
  • 注释节点：注释内容，包括换行和空格
  • 属性节点：用于修饰一个元素的属性
  • document：根节点，作为页面的承载出现，不是一个标签
• 对DOM的操作，就是对DOM树的操作

1. 获取节点
   1-1 获取元素节点

   • 非常规标签
     • html：document.documentElement
     • body：document.body
     • head：document.head
   • 常规标签
     • getElementById()
     • getElementByClassName()
     • getElementByTagName()
     • getElementByName()
     • querySelector()
     • querySelectorAll()
       1-2 获取节点：
   • childNodes
   • children
   • firstChild
   • firstElementChild
   • lastChild
   • lastElementChild
   • previousSibling
   • previousElementSibling
   • nextSibling
   • nextElementSibling
   • parentNode
   • parentElement
   • attributes

2. 操作元素文本
   2-1 innerText

   • 读：元素.innerText;
   • 写：元素.innerText = ‘值’
     2-2 innerHTML
   • 读：元素.innerHTML;
   • 写：元素.innerHTML = ‘值’
     2-3 value
   • 操作表单元素的value值
   • 读：表单元素.value
   • 写：表单元素.value = “值”
     注意：以上三种方式的写入都是完全覆盖的写入

3. 操作元素属性
   3-1 操作原生属性

   • 读：元素.属性名
   • 写：元素.属性名 = “值”
     3-2 操作自定义属性
   • 获取：元素.getAttribute(“属性名”)
   • 设置：元素.setAttribute(“属性名”, “属性值”)
   • 删除：元素.removeAttribute(“属性名”)
     3-3 操作h5自定义属性
   • 获取：元素.dataset.属性名
   • 设置：元素.dataset.属性名 = “属性值”
   • 删除：delete 元素.dataset.属性名

4. 操作元素样式
   4-1 获取元素的行内样式

   • 语法：元素.style.样式名
     4-2 设置元素行内样式
   • 语法：元素.style.样式名 = “样式值”
     4-3 获取元素的非行内样式（包含了行内样式和非行内样式）
   • window.getComputedStyle(元素).样式名
     注意：涉及到带有中划线的样式名，需要写成驼峰命名或者数组关联语法。

5. 操作元素类名
   5-1 className

   • 读：元素.className
   • 写：元素.className = “值”
   • 追加：元素.className += “新类名”
     5-2 classList
   • 获取：元素.classList
   • 添加：元素.classList.add(“className”)
   • 删除：元素.classList.remove(“className”)
   • 切换: 元素.classList.toggle(“className”);

6. 获取元素尺寸
   6-1 获取元素内容+padding+border区域的尺寸

   • 元素.offsetWidth
   • 元素.offsetHeight
     6-2 获取元素内容+padding区域的尺寸
   • 元素.clientWidth
   • 元素.clientHeight
     注意：当元素的display为none时，无法获取尺寸

7. 获取元素偏移量时，可以使用以下语法：

   • 要获取元素相对于其定位父级的水平偏移量：ele.offsetLeft
   • 要获取元素相对于其定位父级的垂直偏移量：ele.offsetTop

8. 要获取可视窗口的区域尺寸（不包含滚动条），可以使用以下属性：

   • 可视窗口的宽度：document.documentElement.clientWidth
   • 可视窗口的高度：document.documentElement.clientHeight

9. 节点操作包括创建、插入、删除、替换和克隆节点的操作：
   9-1 创建节点：

   • 创建元素节点：使用 document.createElement("标签名")
   • 创建文本节点：使用 document.createTextNode("文本内容")
     9-2 插入节点：
   • 向父节点末尾添加子节点：使用 父节点.appendChild(子节点)
   • 在指定节点之前插入子节点：使用 父节点.insertBefore(子节点, 谁的前面)
     9-3 删除节点：
   • 删除节点本身：使用 节点.remove()
   • 从父节点中移除子节点：使用 父节点.removeChild(子节点)
     9-4 替换节点：
   • 替换子节点：使用 父节点.replaceChild(换上的节点, 被替换的节点)
     9-5 克隆节点：
   • 克隆节点（不克隆后代节点）：使用 节点.cloneNode()
   • 克隆节点（包括后代节点）：使用 节点.cloneNode(true)

10. 节点属性包括nodeType、nodeName和nodeValue：
    10-1 nodeType表示节点的类型，常见的类型及其对应的变量如下：

    • document节点：9（对应的变量：Node.DOCUMENT_NODE）
    • 文本节点：3（对应的变量：Node.TEXT_NODE）
    • 属性节点：2（对应的变量：Node.ATTRIBUTE_NODE）
    • 注释节点：8（对应的变量：Node.COMMENT_NODE）
    • 元素节点：1（对应的变量：Node.ELEMENT_NODE）
      10-2 nodeName表示节点的名称，根据节点类型不同有不同的取值：
    • 元素节点：大写标签名
    • 属性节点：属性名
    • 文本节点：#text
    • 注释节点：#comment
    • document节点：#document
      10-3 nodeValue表示节点的值，根据节点类型不同有不同的取值：
    • 元素节点：null
    • 文本节点：文本内容
    • 属性节点：属性值
    • 注释节点：注释内容
    • document节点：null

// console.log(document.nodeType);
// console.log(Node.DOCUMENT_NODE);
// console.log(document.nodeType === Node.DOCUMENT_NODE);
// console.log(box.nodeType);
// console.log(Node.ELEMENT_NODE);
// console.log(box.firstChild.nodeType);
// console.log(Node.COMMENT_NODE);
// // console.log(document.nodeName);
// // console.log(box.nodeName);
// // console.log(box.firstChild.nodeValue);
// console.log(box.nodeName); // DIV
// console.log(document.nodeName); // #document
// console.log(box.firstChild.nodeName); // #text
// console.log(box.attributes.id.nodeName); // id
// console.log(box.lastChild.nodeName); // #comment
console.log(document.nodeValue);