BOM
-
概念:Browser Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象
-
组成
- Window:窗口对象
- 方法
-
与弹出框有关的方法
- alert 警告框
- confirm 确认对话框
- prompt 提示用户输入值
-
如打开关闭有关的方法
- close 关闭浏览器窗口
- open 打开一个新的浏览器窗口
- 返回一个新的window对象
-
与定时器有关的方法
**setTimeout() **在指定的毫秒数后调用函数或计算表达式- 参数
- js代码或者方法对象
- 毫秒值
cleartTimeout:取消由setTimeout方法设置的timeout
serInterval:按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval 取消由setInterval() 设置的timeout
- 参数
-
- 属性
- 获取其他BOM对象
- history
- location
- navigator
- screen
- 获取其他BOM对象
- 特点
- window对象不需要创建可以直接使用window使用。 window.方法名()
- 方法
- Navigator:浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
* - Location:地址栏对象
- window.location
- reload 刷新
- location.href
- Window:窗口对象
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id="img" src="img/1.png" width="100%">
</body>
<script>
/*
分析:
1. 在页面使用img标签展示图片
2. 定义一个方法,修改图片对象的src属性
3. 定义一个定时器,每隔3秒调用方法一次
* */
// 修改图片的src属性
var number = 1;
function fun() {
number ++;
// 判断number是否大于3
if (number > 3){
number = 1;
}
var img = document.getElementById("img");
img.src = "img/" + number + ".png";
}
// 定义定时器
setInterval(fun, 3000);
</script>
</html>
DOM
-
概念:Document Object Model 文档对象模型
- 将标记语言的各个组成部分,封装成对象。
-
功能:控制HTML文档的内容
-
核心 DOM
- Document:文档对象
- Element:元素对象
- Attribute:属性对象
- Test:文本对象
- Commit:注释对象
- Node:节点对象,其他5个的父对象
- 特点:所有dom对象都可以被认为是一个节点
- 方法:
- CRUD dom树:
- appendChild
- removeChild
- replaceChild
- CRUD dom树:
- 属性
- parentNode : 返回节点的父节点
-
XML DOM
-
HTML DOM
- 标签体的设置和获取: InnerHTML
- 使用html元素对象的属性
- 控制样式
- 使用元素的style属性来设置
div.style.width = “200px” - 提前定义好类选择器的样式,通过元素的className属性来设置class属性值。
- 使用元素的style属性来设置
-
代码:获取页面标签(元素)对象 Element
- document.getElementByID(“id值”):通过元素的id获取元素对象
-
操作Element对象:
- 修改属性值
- 修改标签体的内容
- 属性 innerHTML
- 获取元素对象
- 使用innerHTML属性修改标签体内容
- 属性 innerHTML
事件
- 功能:某些组件被执行了某些操作后,触发某些代码的执行。
-
将浏览器的各个组成部分封装成对象
-
事件:某些操作,如:单击,双击,键盘,鼠标
-
事件源:组件,如:按钮,文本输入框
-
监听器:代码
-
注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码。
-
- 常见的事件
-
点击事件
- onclick:单击事件
- ondblclick:双击事件
-
焦点事件
- onblur:失去焦点
- 一般用于表单验证
- onfocus:元素获得焦点
- onblur:失去焦点
-
加载事件
- onload:一张页面或一幅图像完成加载
1.
- onload:一张页面或一幅图像完成加载
-
鼠标事件
- onmousedown
- onmouseup
- onmousemove
- onmouseout
-
键盘事件
- onkeydown
- onkeyup
- onkeypress
-
选中和改变
- onchange
- onselect
-
表单
- onsubmit
- 可以组织表单的提交
- onreset
- onsubmit
-