BOM

介绍

BOM：browser object model浏览器对象模型，用对象操作浏览器

window对象是操作浏览器的顶级对象

全局中的变量其实是window对象的属性，全局的函数是window的一个方法：

var a = 10;
function fn(){
    console.log('这是fn函数')
}
console.log(window)

浏览器中的效果：

全局变量和函数在window中
1610161232734.png

window的子对象：location、history、navigator、screen、document、........

location

操作整个地址栏的url：

console.log(location.href) // 获取地址栏的地址

浏览器中效果：

获取地址栏
1610161429443.png

设置地址栏的url，跳转页面：

<button id="btn">跳转</button>
<script>
btn.onclick = function(){
    location.href = 'http://www.qq.com';
}
</script>

浏览器中的效果：

跳转页面
跳转页面.gif

location.search // 获取地址栏中的数据
location.search = '?a=1&b=2' // 设置地址栏中的数据
location.hash // 获取锚点
location.hash = '#top'; // 设置锚点

// location的方法
location.assign(地址) // 跳转
location.relpace(地址) // 跳转
location.reload() // 刷新页面

history

操作浏览记录：

history.back() // 后退一个页面
history.forward() // 前进一个页面

history.go(数字) // 正数是前进，负数是后退，前进或后退几个页面，数字代表

定时器

每隔一段时间就执行一个函数：setInterval()

参数1：函数

参数2：毫秒数

setInterval(function(){
    console.log(1)
},1000)
// 每隔1秒钟就输出1

返回值：数字。代表当前页面中第几个定时器

定时器如果不停止，内存一直在运行 - 效率很低。

需要清除定时器：clearInterval(定时器的返回值)

延迟一段时间执行函数：setTimeout()

参数1：函数

参数2：毫秒数

setTimeout(function(){
    console.log(2)
},1000)
// 1秒以后，输出1 - 只执行一次

返回值：数字。代表当前页面中第几个定时器

定时器如果不停止，内存一直在运行 - 效率很低。

需要清除定时器：clearTimeout(定时器的返回值)

异步操作

<font color="red">所有的异步代码，都在同步代码执行完以后，再执行</font>

window的事件

window.onload = function(){}
window.onscroll = function(){} // 当滚动条滚动就会触发这个事件
window.onresize = function(){} // 当浏览器窗口大小发生改变就会触发这个事件

DOM

获取元素

document.querySelector(css选择器) // 在低版本ie中不兼容
// 获取到的是满足css选择器的第一个元素

document.querySelectorAll(css选择器) // 在低版本ie中不兼容
// 获取到的是一个伪数组
// 可以像数组一样取长度、遍历、取下标，但是不能使用数组的方法

document.getElementsByTagName(标签名)
document.getElementById(id名)
document.getElementsByName(name属性的值)
document.getElementsByClassName(类名) // 在低版本ie中不兼容

属性操作

// 获取属性的值
元素.getAttribute(属性名) // 返回值

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

// 删除属性
元素.removeAttribute(属性名)

// 如果是单选框、复选框 的 checked使用 .
复选框.checked = true // 选中
复选框.checked = false// 取消选中

内容操作

元素.innerText // 获取标签中的文本
元素.innerText = 值 // 设置标签中的内容

元素.innerHTML // 获取标签中带标签的所有内容
元素.innerHTML = 值 // 值里面的标签是能被解析

// 表单元素
元素.value // 获取表单元素的值
元素.value = 值 // 设置表单元素的值

设置样式

元素.style.css属性名 = 值

css属性名不能有连字符，如果有连字符就要换成中括号的形式，或者写成驼峰命名

元素.style['background-color'] = 'red'
元素.style.backgroundColor = 'red';

类名操作

元素.className // 获取元素的类名
元素.className = 类名; // 设置标签的类名