JavaScript:js基础2

BOM

Browser Object Model浏览器对象模型

允许JavaScript与浏览器进行对话

Js将浏览器的各个组成部分封装为对象

可以通过操作BOM对象来实现操作浏览器中的部分

location.href = ""
//操作浏览器地址栏中的地址
1
2

BOM中包含了以下对象

window:浏览器窗口对象

Navigator:浏览器对象(基本不使用)

Screen:屏幕对象(基本不使用)

History:历史记录对象

Location:地址栏对象

window对象

浏览器窗口封装对象

获取window对象

无需创建直接使用即可

window.alert();
//window可以省略
1
2

window对象中包含了获取其他BOM对象的属性

即通过window对象可以直接调用获得其他的的BOM对象

window.location
//window可以省略,即location对象
1
2

window对象函数

alert(...)
//弹出警告框
confirm()
//弹出确认框
//可以用变量值接收,确定返回true,取消返回false
setInterval()
//按照指定周期(ms)来调用函数
//在指定时间间隔后循环执行函数
setTimeout()
//在指定的毫秒后调用函数或计算表达式
//在指定时间间隔后执行一次函数
1
2
3
4
5
6
7
8
9
10
11

Location对象

js对浏览器地址栏封装对象,操作该对象可以跳转到任意页面

获取对象

window.location.属性;
location.属性;
1
2

location对象属性

常用属性:href

设置或者返回完整的URL

location.href = "";
//跳转到对应URL
1
2

DOM对象

document object model文档对象模型

js将HTML文档的各个组成部分封装为对象

分为

Document:整个文档对象

Element:元素对象

Attribute:属性对象

Text:文本对象

Comment:注释对象

通过DOM可以

改变HTML元素内容

改变HTML元素样式

对HTML DOM事件作出反应

添加和删除HTML元素

DOM相关概念

是访问HTML和XML文档的标准,分为三个不同部分

核心DOM

针对任何结构化文档的核心模型

XML DOM

针对XML文档的标准模型

HTML DOM

针对HTML文档的标准模型

获取Element对象

通过Document对象获取

提供了以下获取Element元素对象的函数

getElementById()
//根据id属性值获取element对象
getElementsByTagName()
//根据标签名称获取,返回element对象数组
getElementsByName()
//根据name属性值获取,返回Element对象数组
getElementsByClassName()
//根据class属性值获取,返回Element对象数组
1
2
3
4
5
6
7
8

HTML Element对象使用

1

事件监听

监听页面上的事件

按钮点击,鼠标移动等

js在侦测到事件时执行一段逻辑代码

事件绑定

js提供了两种事件绑定方式

通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()">
1

function on(){
	alert("");
}
//on绑定的函数
1
2
3
4

通过DOM元素属性进行绑定

 <input type="button" id="btn">
1

document.getElementById("btn").onclick = function(){
	alert("");
}
1
2
3

常见事件

onclick
//鼠标单击事件
onblur
//元素失去焦点
onfocus
//元素获得焦点
onload
//某个页面或者图像被完全加载
onsubmit
//当表单被提交时触发
onkeydown
//当某个键被按下
onmouseover
//鼠标被移到某个元素之上
onmouseout
//鼠标从某个元素移开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16