一、BOM 对象
1. BOM 介绍
BOM全称为“Browser Object Model”,浏览器对象模型。提供一系列操作浏览器的属性和方法。核心对象为window对象,不需要手动创建,跟随网页运行自动产生,直接使用,在使用时可以省略书写。
2. 对象方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BOM</title>
</head>
<body>
<button id="btn">删除</button>
<script>
//alert()
//prompt()
//确认框
//当btn被点击时,弹出确认弹框,提示用户是否删除
window.onload = function(){
//查找btn
var btn = document.getElementById('btn')
btn.onclick = function(){
//confirm 会根据用户的选择返回不同的结果:确定是true,取消是false
var isDel = confirm('确定删除?')
console.log(isDel)
if(isDel){
alert('删除成功')
}
}
}
</script>
</body>
</html>
周期性定时器
作用:每隔一段时间就执行一次代码
//开启定时器:
var timerID = setInterval(function,interval);
/*
参数 :
function : 需要执行的代码,可以传入函数名;或匿名函数
interval : 时间间隔,默认以毫秒为单位 1s = 1000ms
返回值 : 返回定时器的ID,用于关闭定时器
*/
关闭定时器 :
//关闭指定id对应的定时器
clearInterval(timerID);
一次性定时器
作用:等待多久之后执行一次代码
//开启超时调用:
var timerId = setTimeout(function,timeout);
//关闭超时调用:
clearTimeout(timerId);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定时器timer</title>
</head>
<body>
<button id="btn">清除周期性定时器</button>
<script>
//周期性定时器
function sayHello(){
alert('Hello World')
}
//创建周期性定时器
//setinterval(函数名,时间间隔)
//时间间隔单位是毫秒
// var timer = setInterval(sayHello, 2000)
var btn = document.getElementById('btn')
btn.onclick = function(){
//停止计时器,clearinterval(),清除周期性定时器
clearInterval(timer)
timer = null
}
//创建一次性定时器(通常用于延迟做某些事)
var timer2 = setTimeout(sayHello, 2000)
//清除一次性定时器
clearTimeout(timer2)
timer2 = null
</script>
</body>
</html>
3. 对象属性
window的大部分属性又是对象类型
-
history
作用:保存当前窗口所访问过的URL
属性 : length 表示当前窗口访问过的URL数量
方法 :back() 对应浏览器窗口的后退按钮,访问前一个记录 forward() 对应前进按钮,访问记录中的下一个URL
-
location
作用:保存当前窗口的地址栏信息(URL)
属性 : href 设置或读取当前窗口的地址栏信息
方法 :reload(param) 重载页面(刷新) 参数为布尔值,默认为 false,表示从缓存中加载,设置为true,强制从服务器根目录加载
二、DOM节点操作
DOM全称为 “Document Object Model”,文档对象模型,提供操作HTML文档的方法。(注:每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。)
1. 节点对象
JavaScript 会对 html 文档中的元素、属性、文本甚至注释进行封装,称为节点对象,提供相关的属性和方法。
2. 访问节点
- 元素节点 ( 操作标签)
- 属性节点(操作标签属性)
- 文本节点(操作标签的文本内容)
标签属性都是元素节点对象的属性,可以使用点语法访问,例如:
h1.id = "d1"; //set 方法
console.log(h1.id); //get 方法
h1.id = null; //remove 方法
注意 :
- 属性值以字符串表示
- class属性需要更名为 className,避免与关键字冲突,例如:
h1.className = “c1 c2 c3”;
3. 操作元素样式
- 为元素添加 id、class属性,对应选择器样式
- 操作元素的行内样式,访问元素节点的style属性,获取样式对象;样式对象中包含CSS属性,使用点语法操作。
p.style.color = "white";
p.style.width = "300px";
p.style.fontSize = "20px";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM文档对象模型</title>
<style>
.red{
color: red;
}
.blue{
color: blue;
}
</style>
<script>
window.onload = function(){
//查找元素
var div = document.getElementById('d1');
// var div = document.getElementsByName(); //获取表单控件对应的name值的
// var div = document.getElementsByClassName('red'); //找到的是一系列元素,集合
// var div = document.getElementsByTagNameNS('div'); //找到的是一系列元素,集合
//对元素内容的操作 innerHTML, innerText
console.log(div.innerHTML); //直接访问,打印的文字是带格式的
console.log(div.innerText); //打印不带格式的文本文字
div.innerHTML = '2020-1-2'; //修改元素内容
//对元素属性的操作
//找到的div是一个DOM对象, 通过对象.属性的方式操作
console.log(div.id); //div.getAttribute('id')
div.id = 'div1'; //改id,程序自上而下运行,不会影响其他操作 div.setAttribute('id', 'div1')
console.log(div.id);
console.log(div.className); //查看类名
div.className = 'blue';
console.log(div.className) //该类名
//对元素样式的操作
console.log(div.style);
div.style.backgroundColor = 'lightblue'; //与之前的属性命名不同了,background-color:'lightblue'
}
</script>
</head>
<body>
<div id="d1" class="red" style="width: 200px; height:200px; border:2px solid blue">
div中的演示文字
</div>
</body>
</html>
注意 :
- 属性值以字符串形式给出,单位不能省略
- 如果css属性名包含连接符,使用JS访问时,一律去掉连接符,改为驼峰, font-size -> fontSize