BOM
Browser Object Model浏览器对象模型
允许JavaScript与浏览器进行对话
Js将浏览器的各个组成部分封装为对象
可以通过操作BOM对象来实现操作浏览器中的部分
location.href = ""
//操作浏览器地址栏中的地址
BOM中包含了以下对象
window:浏览器窗口对象
Navigator:浏览器对象(基本不使用)
Screen:屏幕对象(基本不使用)
History:历史记录对象
Location:地址栏对象
window对象
浏览器窗口封装对象
获取window对象
无需创建直接使用即可
window.alert();
//window可以省略
window对象中包含了获取其他BOM对象的属性
即通过window对象可以直接调用获得其他的的BOM对象
window.location
//window可以省略,即location对象
window对象函数
alert(...)
//弹出警告框
confirm()
//弹出确认框
//可以用变量值接收,确定返回true,取消返回false
setInterval()
//按照指定周期(ms)来调用函数
//在指定时间间隔后循环执行函数
setTimeout()
//在指定的毫秒后调用函数或计算表达式
//在指定时间间隔后执行一次函数
Location对象
js对浏览器地址栏封装对象,操作该对象可以跳转到任意页面
获取对象
window.location.属性;
location.属性;
location对象属性
常用属性:href
设置或者返回完整的URL
location.href = "";
//跳转到对应URL
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对象数组
HTML Element对象使用
事件监听
监听页面上的事件
按钮点击,鼠标移动等
js在侦测到事件时执行一段逻辑代码
事件绑定
js提供了两种事件绑定方式
通过HTML标签中的事件属性进行绑定
<input type="button" onclick="on()">
function on(){
alert("");
}
//on绑定的函数
通过DOM元素属性进行绑定
<input type="button" id="btn">
document.getElementById("btn").onclick = function(){
alert("");
}
常见事件
onclick
//鼠标单击事件
onblur
//元素失去焦点
onfocus
//元素获得焦点
onload
//某个页面或者图像被完全加载
onsubmit
//当表单被提交时触发
onkeydown
//当某个键被按下
onmouseover
//鼠标被移到某个元素之上
onmouseout
//鼠标从某个元素移开