【前端开发—JavaScript】——BOM/DOM

最新推荐文章于 2024-07-10 14:03:37 发布

正经的取名

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量83

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_70903072/article/details/131384257

版权

Bom

Browser Object Model

浏览器对象模型

浏览器对象模型: 浏览器提供的一系列可以操作浏览器API

BOM中的顶级对象 window (全局中的window)

+ 使用BOM中的API操作的时候,本质上都是在winodw对象中的方法或对象,属性等

+ 比如: alert()---->window.alert();

+ 注意: 所有BOM操作的内容都可以省略window.

BOM和全局变量的关系

+ 在全局中 `var` 定义的变量本质上都是给window添加的属性

+ 注意: 在全局中不要定义name,top等变量名,因为window中本身就是有这些属性

screen

history

history.back() 返回到上一个页面,相当于浏览器的后退按钮
history.forward() 前进到下一个页面(下一个页面必须是点击以后的页面)，相当于浏览器的前进按钮
history.go(数值) 正负数都可以(前进和后退的页面数量)

navigation

可以通过navigator对象来获取浏览器的信息
一般可以通过 userAgent 属性获取浏览器有用的信息

location

方法属性

+ href

- 可以读取浏览器页面的完整地址

+ 语法: location.href

- 可以设置浏览器页面的地址

+ 语法: locaiton.href = 新地址

+ 页面会跳转到新地址

+ assign()

- 语法: location.assign(新地址)

+ 跳转到新的地址

+ 可以直接给location赋值也会发生跳转

+ reload()

+ 语法: location.reload()

- 刷新页面

- 注意不能写在全局中

//location对象  
        {
          hash: "#asd",   哈希值
          host: "www.baidu.com",  主机名
          hostname: "www.baidu.com", 域名
          href: "https://www.baidu.com/error.html?curr=1&psize=2&c=3#asd",  完整地址
          origin: "https://www.baidu.com",
          pathname: "/error.html",  请求路径 
          port: "",      端口
          protocol: "https:",   协议
          search: "?curr=1&psize=2&c=3"  查询字符串
        }

scroll

浏览器页面滚动的距离

获取浏览器滚动页面卷去的距离

   获取页面垂直卷去的距离

        语法: document.documentElement.scrollTop
                + 在html页面中有DOCTYPE标签的时候获取
        语法: document.body.scrollTop
                + 在html页面中没有DOCTYPE标签的时候获取
        兼容获取(短路写法)
                + var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

   获取页面水平卷去的距离

        语法: document.documentElement.scrollLeft
                + 在html页面中有DOCTYPE标签的时候获取
        语法: document.body.scrollLeft
                + 在html页面中没有DOCTYPE标签的时候获取
        兼容获取(短路写法)
                + var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

浏览器页面滚动到
语法: window.scrollTo()
+ 传入两个数字(x轴,y轴)
- 直接到达的效果
- 只传递一个参数会报错
+ 传入一个对象 ({left:值,top:值,behavior:滚动模式})
- behavior: 传入 'smooth' 可以平滑的滚动

定时器

间隔定时器

语法: setInterval(函数,时间,参数,...)
+ 时间: 单位是毫秒
+ 执行: 定时器开启后,每间隔一段时间就会执行一次函数
- 而且从第三个参数开始是给函数执行时传递的实参
延时定时器(爆炸定时器)

延迟定时器

语法: setTimeout(函数,时间,参数,...)
+ 时间: 单位是毫秒
+ 执行: 定时器开启后,到达时间就会执行一次函数
- 而且从第三个参数开始是给函数执行时传递的实参
+ 如果不传入时间默认就是0秒

两种定时器开启后都会返回一个定时器标识
        + 定时器标识:
          - 用于标记在页面中是第一个定时器
        - 用于关闭定时器使用
定时器的时间计算精度和浏览器的性能及运行浏览器的电脑性能有关
也就是说,定时器的时间精度可能为0ms
定时器开启后定会器的计时就开始了

关闭定时器

语法: clearInterval(定时器标识)
语法: clearTimeout(定时器标识)
作用: 关闭传入的标识对应的定时器
+ 两个语法都管两种定时器

同步与异步

js的执行是单线程执行; 在同一个时间只能做一个事情
js中代码执行分为同步执行和异步执行
+ 同步代码执行: 按照顺序执行
+ 异步代码执行: 不是按照顺序执行,而是跳过执行;
- 先执行同步代码,执行到异步代码的时候(不执行),而是将异步代码放到 `任务队列中`, 当所有的同步代码都是执行完毕后,才会去 `任务队列`中来执行异步代码
定时器中传入的函数就是异步执行

浏览器的事件

1. load
- 触发时机: 当页面所有资源都加载完毕之时触发
2. resize
- 触发时机: 可视窗口大小发生变化
3. scroll
- 触发时机: 滚动条滚动的时候触发
4. unload
- 触发时机: 页面关闭的时候触发

浏览器标签页

1. window.open()
- 语法: window.open(地址)
- 打开一个新的标签页
2. window.close()
- 语法: window.close()
- 关闭当前标签页

浏览器可视窗口尺寸

浏览器窗口尺寸(包含滚动条的大小)
1.window.innerWidth 浏览器窗口的宽度
2.window.innerHeight 浏览器窗口的高度

浏览器弹窗

1.window.alert("警告弹窗")
2.confirm("提示弹窗")
3.prompt("输入弹窗")

浏览器的本地存储

Storage

1.localStorage：持久化存储：只要不删除，就一直保存
sessionStorage：临时存储（会话级别）
2.存储空间大小：20M左右
3.只能存储基本数据类型（字符串）：以键值对进行存储
4.localStorage:在相同打开方法下可以跨页面访问
seccionStorage:只能通过当前页面跳转到目标页面才可以访问

localStorage

增加
语法: localStorage.setltem(键名，键值)键值只能是字符串
删除
语法: localStarage.remove(键名)
修改
和增加的语法一样，键名存在就是修改
查找
语法: localStorage.getltem(键名)返回值就是对应键名的值，如果不存在就返回null
清空
语法: localStorage.clear()清空所有数据
sessionStorage

增加
语法: sessionsStorage.setltem(键名，键值)键值只能是字符串
删除
语法: sessionsStarage.remove(键名)
修改
和增加的语法一样，键名存在就是修改
查找
语法: sessionsStorage.getltem(键名)返回值就是对应键名的值，如果不存在就返回null
清空
语法: sessionsStorage.clear()清空所有数据

cookie

1.可以设置有效时间
2.存储空间：4kb左右
3.存储数据形式：键值对；存储数据类型只能是基本数据类型(字符串)
4.存储位置：只能存储在域名下；只有通过服务器打开的页面才能操作cookie；可以使用vscode的live Server插件开启服务器
5.前后端操作：前端通过js操作，后端任意语言都能操作
6.前后端交互：只要cookie有内容，会在前后端交互的时候自动携带数据到后端

设置

语法: document.cookie= 'cookie的键值对'
设置具有过期时间的cookie
+ 语法: document.cookie= 'cookie的键值对;expires=时间对象'
+ 注意: 服务器的时间是世界时间

获取

语法: document.cookie
返回值: 以字符串形式返回所有的cookie

DOM

Document Object Model 文档对象模型: 浏览器提供的操作页面文档的方法或属性(API)
- DOM的顶级对象是 document
- DOM操作本质上就是操作DOM元素的各种内容
+ 获取DOM元素
+ 操作DOM元素的属性,样式,内容,类名 .....
+ DOM操作的第一步都是获取要操作的DOM元素

属性

属性的分类
1. 原生属性
- 在W3C规范中已经有的就是原生属性
- 比如:
+ 常规标签的 id class
+ 表单标签 type,value,name
2. 自定义属性(非H5)
- 自己定义的属性名
- 比如: index=1
3. H5自定义属性
- 自定义属性名,但是必须是以data-开头
- 比如: data-id

操作属性

操作DOM元素属性
1. 操作DOM元原生属性
- 读取: DOM元素.属性名
- 修改设置: DOM元素.属性名 = 值
2. 操作自定义属性(非H5)
- 读取: DOM元素.getAttribute('属性名') 返回对应的属性值
- 修改设置:
+ DOM元素.setAttribute('属性名','属性值')
3. 操作H5自定义属性
- 标签元素都有一个dataset属性,值是类似于一个对象数据
- 里面存储的就是所有的 H5自定义属性作为键名,值属性值
+ 比如: data-id=1
- 读取：元素.dataset.id
- 修改：元素.dataset.id = 666
- 删除：delete 节点.dataset.id

操作DOM元素的类名

- 主要是为了可以批量操作样式

1. 直接通过元素的原生属性操作
- 因为元素的类属性名是class 和js中的class关键字冲突了
- 所以js中通过原生属性操作类是使用className来操作
- 获取类名:
+ 语法: 元素.className
- 设置:
+ 语法: 元素.className = 类名
+ 覆盖性设置
2. classList
- 元素都有一个calssList属性, 是一个类似于数组的结构
+ 对于元素的类名都是使用这个伪数组暴露的方法来进行操作
- 添加类名: 元素.classList.add('要添加的类名')
- 移除类名: 元素.classList.remove('要移除的类名')
- 切换类名: 元素.classList.toggle('要切换的类名')
+ 切换: 原本有则移除没有则添加
- 判断类名是否存在: 元素.classList.contains('类名')
+ 返回值: 布尔值

操作元素样式

1. 获取行内样式
- 语法: 元素.style.样式名
- 语法: 元素.style['样式名']
2. 获取非行内样式
- 获取的是作用在元素上的样式
- 语法: window.getComputedStyle(元素).样式名
- 语法: window.getComputedStyle(元素)['样式名']
+ 此语法不能兼容IE
- 语法: 元素.currentStyle.样式名
- 语法: 元素.currentStyle['样式名']
+ 此语法只能用于IE
3. 设置元素样式
- 样式的设置语法只有一种
- 语法: 元素.style.样式名 = 样式值
- 语法: 元素.style['样式名'] = 样式值

操作内容

- 设置内容都是覆盖性设置
1. innerText 操作元素的文本内容
- 可读写
- 语法:
+ 获取: 元素.innerText
+ 设置: 元素.innerText = 内容
2. innerHTML 操作元素的超文本内容
- 可读写
- 语法:
+ 获取: 元素.innerHTML
+ 设置: 元素.innerHTML = 内容
3. value 操作的是表单标签的内容
- 可读写表单标签的原生属性
- 语法:
+ 获取: 元素.value
+ 设置: 元素.value = 内容

距离

浏览器

DOM操作获取浏览器可视尺寸
- 通过html的宽度来获取
- 语法: document.documentElement.clientWidth
- 语法: document.documentElement.clientHeight
+ 不包含滚动条
   坐标信息

1.offsetX 和 offsetY 相对于元素
2.clientX 和 clientY 相对于可视窗口
3.pageX 和 pageY 相对于页面
   元素

获取元素的尺寸
1. offset 一套获取的是元素的内容 + padding + border的尺寸
- 语法: 元素.offsetWidth 获取宽度
- 语法: 元素.offsetHeight 获取高度
2. client 一套获取的是元素的内容 + padding 的尺寸
- 语法: 元素.clientWidth 获取宽度
- 语法: 元素.clientHeight 获取高度
   元素偏移量

1. offsetParent
- 语法: 元素.offsetParent
- 返回值: 获取元素的偏移父级(定位父级)
2. offset 一套获取元素相对于偏移父级的偏移量
- 语法: 元素.offsetLeft 元素的左边距离偏移父级左边的距离
- 语法: 元素.offsetTop 元素的上边距离偏移父级上边的距离
3. client 一套获取元素边框
- 语法: 元素.clientLeft 元素的padding左边距离元素左外边的距离（左边框）
- 语法: 元素.clientTop 元素的padding上边距离元素上外边的距离（上边框）

节点

获取常规节点
       childNodes 所有子节点 firstChild 第一个子节点 lastChild 最后一个子节点         previousSiBling 前一个兄弟节点 nextSiBling 下一个兄弟节点
       children 所有子元素节点
       firstElementChild 第一个子元素节点
       lastElementChild 最后一个子元素节点
       previousElementSiBling 前一个兄弟元素节点
       nextElementSiBling 下一个兄弟元素节点
       parentNode 父节点
       attributes 所有属性节点
   元素节点
       获取元素节点
           常规元素节点
               getElementById/getElementsByClassName/getElementsByTagName
               querySelector/querySelectorAll
           非常规元素节点
               HTML document.documentElement
               Head document.head
               body document.body
               title document.title
       创建：document.createElement(标签名)
   属性节点
       获取属性节点元素.arrtibutes[0] 元素.getAttribute()
       设置：元素.setAttribute()
       删除：元素.removeArrtibute()
   文本节点
       获取：元素.childNodes[0]
       创建：document.createTextNode(文本内容)
   注释节点
       获取：元素.childNodes[1]
   插入节点
       insertBefore(插入的节点，在哪个节点前插入)
       追加节点：父节点.appendChild(插入的节点)
   删除节点
       节点.removeChild(删除的子节点)；将节点的所有内容移除
       节点.remove()；将节点本身移除
   克隆节点
       节点.cloneNode()；
           不传递参数：默认false，只克隆节点本身
           传递参数true：克隆节点及其所有后代节点
   替换节点
       父节点.replaceChild(要替上的子节点,替下的子节点,)
           替换父节点中的某一个子节点
       节点.replaceWith(替换上的节点)
           替换节点本身

节点属性

节点类型
       将不同类型的节点按数值划分
       元素节点：1
       属性节点;2
       文本（内容）节点：3
       注释节点：8
   节点值
       节点.nodeValue
       元素节点：null
       属性节点：属性值
       文本节点：文本内容
       注释节点：注释内容
   节点名称
       节点.nodeName
       元素节点：元素节点标签名大写
       属性节点：属性名
       文本节点：#text
       注释节点：#comment
将不同类型的节点按数值划分
<div id="属性节点"> 文本节点  <span>元素节点</span> </div>

正经的取名

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【前端开发—JavaScript】——BOM/DOM

浏览器对象模型浏览器对象模型: 浏览器提供的一系列可以操作浏览器API。Document Object Model 文档对象模型: 浏览器提供的操作页面文档的方法或属性(API) - DOM的顶级对象是 document - DOM操作本质上就是操作DOM元素的各种内容 + 获取DOM元素 + 操作DOM元素的属性,样式,内容,类名 ..... + DOM操作的第一步都是获取要操作的DOM元素
复制链接

扫一扫