九、DOM和BOM

小白有点绿

已于 2023-03-28 20:42:17 修改

阅读量89

点赞数 1

分类专栏： js知识文章标签： javascript 开发语言 ecmascript Powered by 金山文档

于 2023-03-25 17:24:02 首次发布

本文链接：https://blog.csdn.net/qq_59614745/article/details/129737768

版权

js知识专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、BOM

BOM介绍

Browser Object Model

通过对象组成的结构来操作浏览器

浏览器的历史记录

history.back() 后退

history.forward() 前进

history.go() 可以为正数也可以为负数

浏览器的地址栏信息

location.href 设置或返回完整的的url

location.hash 设置或返回从#开始的url --- 锚点

location.search 设置或返回url中的参数部分

location.assign("要跳转的地址") 设置要跳转的地址

location.replace() 用新的地址代替旧的地址

location.reload() 重新加载页面

浏览器的弹出层

window.alert("恭喜你");

window.prompt("请输入数字");

window.confirm("你确定要删除吗")

浏览器窗口大小

window.innerHeight --浏览器窗口的高度

window.innerWidth -- 浏览器窗口的宽度

浏览器事件

onload事件：当网页中的所有资源都加在完成之后执行这个事件

window.onload = function(){
    console.log("");
}

onscroll 滚动事件：当网页滚动条的位置发生改变的时候触发这个事件

window.onscroll = function () {
  console.log('动了')
}

使用说明：浏览器要有滚动条才行。

浏览器窗口改变事件：resize

window.onresize = function(){
    // 当浏览器的窗口大小发生改变的时候触发这个事件
}

定时器

延迟执行：

使用说明：第一个参数是要执行的函数，第二个参数是延迟时间。返回数字是表示当前页面第几个计数器。

    var time = setTimeout(function () { console.log('自己学')}, 9000 )

隔段时间执行：

使用说明：第一个参数是要执行的函数，第二个参数是间隔时间。返回数字表示页面第几个计数器。

    var time = setInterval(function () { console.log('执行力') }, 10)

关闭定时器：

定时器返回的数字，就是用来关闭定时器的。

使用说明：两种方法可以混用。

clearTimeout(time); // 关闭延迟执行的定时器
clearInterval(time); // 关闭间隔执行的定时器

异步操作

js特点是单线程，就是同一时间只能做一件事，存在多件事时，js会将异步代码交给浏览器处理，因为浏览器是多线程的。

js异步操作，是在所有同步代码执行完成以后才执行异步代码。

定时器是初学者第一个接触的异步代码

同步机制是代码按照顺序执行的，上一行代码执行结束之前，下一行代码会一直等待，（排队机制）

窗口控制

打开新的窗口

语法：window.open(url,窗口名称，窗口风格)

含义：返回新窗口的window

url为空，会打开一个空标签页
url不为空，会打开url页面
窗口名称是一个字符串
窗口风格：
height：窗口高度，数字，必须大于100
width：窗口宽度，数字，必须大于100
left：窗口左边距离，数字
top：窗口上边距离，数字

关闭窗口

语法：window.close()

含义：关闭窗口

设置窗口滚动

语法：window.scrollTo()

含义：设置卷去的距离。

二、DOM

DOM介绍

Document Object Model 文档对象模型

使用对象结构操作HTML文档。

应用场景：改变标签背景色，让标签产生动画。

DOM中顶级对象是document，DOM属于BOM

window.document.bgColor="green";

HTML基本结构操作：

document.body :body比较常用, 因为在页面中是唯一的, 因此可以使用document.body直接获取

document.documentElement : 可以获取html元素及其所有内容

document.head : 可以直接获取head元素

document.title : 可以直接获取title的文本，也可以直接设置标题

获取元素（两类方法）

原因：在js中，标签的id名，可以当做是变量，直接就能代表这个标签元素，但是，id名可以随便定义，会产生重复命名，会产生错误。变量名不会随便定义，需要通过方法来获取标签元素，自己定义给变量，可以避免这种错误。

css选择器获取方法（2种方法）（前端攻城狮常用）

css选择器：类名，id，标签，后代，子元素，兄弟，伪类，群组，通配，属性

单选语法：document.querySelector('css选择器')

作用：选择满足css选择器的第一个元素

<div a='b' class="box">haha1</div>
<div>盒子2</div>

var oDiv = document.querySelector('div')
console.log(oDiv);//<div a="b" class="box">haha1</div>

多选语法：document.querySelectorAll('css选择器')

作用：满足css选择器的所有元素都选中

dom特性：dom中所有能代表标签的变量，他们的数据类型一定是object。console.log输出的时候都是标签的样子，不是对象的样子。

总结：

console.log只能看到标签

想看到对象使用console.dir

获取到的集合 - 是一个伪数组，可以遍历、取下标、可以有长度，就是不能使用数组方法

<body>

<div a='b' class="box">haha1</div>
<div>盒子2</div>

</body>
var oDivs = document.querySelectorAll('div') // 伪数组
console.log(oDivs)

通过document获取节点（4种方法）

document.getElementById("标签id名"); // 通过id名获取标签
document.getElementsByTagName("标签名"); // 通过标签名获取标签
document.getElementsByClassName("标签类名"); // 通类名获取标签
document.getElementsByName("标签的name属性的值"); // 通过标签的name属性获取标签
// 上述4种获取标签的方法，除了通过id可以准确获取到元素，别的方法都是只能获取到元素的集合（类数组）

内容操作

语法：元素.innerText # 代表元素中的文本内容

元素.innerHTML # 代表元素中的所有内容（包含标签）

设置内容

oDiv.innerText = '<b>渲染在页面</b>'

oDiv.innerHTML = '<b>渲染在页面，真的有加粗</b>'

表单元素.value # 表单标签操作内容其实就是在操作元素的属性

总结

双标签内容

标签.innerText - 可以获取文本内容/设置文本内容

带标签内容

标签.innerHTML - 可以获取带标签的内容/设置带标签的内容

表单标签内容

表单标签.value - 可以设置/可获取

坑1：操作内容，必须是具体的标签.属性来操作，不能是集合.属性操作

坑2：不管是设置文本内容还是带有标签的内容，原本的内容就不见了，被覆盖掉了

样式操作：

获取样式语法：window.getComputedStyle(标签)

返回一个有所有样式键值对组成的一个对象

设置样式语法：元素.style.css属性名 = css属性值

如果键中有连字符，用[]和小驼峰解决。

属性操作

标签属性

元素.getAttribute(属性名); # 获取元素属性

元素.setAttribute(属性名,属性值) # 设置元素的属性

元素.removeAttribute(属性名); # 删除元素属性

样式是样式style，属性是属性

标签的属性 - <标签键=值> - 长在标签上的键值对

属性获取 - 标签.getAttribute('属性名') - 返回是属性的值

标签属性

元素.属性名 = 值;

console.log(元素.属性名);

H5自定义属性操作

当给标签添加属性以data-XXX开头时，H5提供了一个快速操作属性的api：

标签.dataset.XXX // 获取属性的值

类名操作（5种）

使用元素的className属性可以设置元素的类名，也可以获取类名

classList类名操作：

添加类名，语法：类名列表.classList .add(类名)

删除类名，语法：类名列表.classList .remove(类名)

让类名在删除和添加之间切换，语法：类名列表.classList .toggle(类名)

判断类名列表中是否包含指定类名：类名列表.classList .contains(类名)

清空所有类名 oDiv.className = ''

页面卷去距离

语法（两种）直接写兼容

document.documentElement.scrollTop  //当有文档的时候， 
document.body.scrollTop  //当没有文档的时候，使用另外一种获取方法
var t = document.documentElement.scrollTop || document.body.scrollTop

短路运算

利用逻辑运算中的&&和||让赋值操作变得更灵活，并带有选择性。

利用逻辑运算符号中的||和&&来判断他左右两边是否能进行到右边，能进行到右边就把右边的值赋值给变量，不能进行到右边，就把左边的值赋值给变量

如果值不是布尔值，就转成布尔值执行。

var 变量 = 数据1 && 数据2
var 变量 = 数据1 || 数据2
例子
var a = true || false  //a的值是左边的值
var a = false|| true   //a的值是右边的值
var a = true  && false //a的值是右边的值
var a = false && true  //a的值是左边的值