BOM浏览器对象模型,DOM文档对象模型
BOM:Browser Object Model 浏览器对象模型
概念:将浏览器的各个组成部分封装为对象
特点:BOM对象不能自己创建,当文档加载进内存,浏览器自动创建。
组成:
Window(*****):窗口对象
Location(**):地址栏对象
History(*):历史记录(当前窗口)对象
Navigator :浏览器对象
Screen:显示器屏幕
availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
Window:窗口对象
使用方式:
1.window.方法名(); window 可以省略
2.方法名;
方法:
与弹出有关的方法
alert() 显示带有一段消息和一个确认按钮的警告框。
例子:window.alert("我是警告弹框");
(**)confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
例子:var flag=window.confirm("你确定吗?");
prompt() 显示可提示用户输入的对话框。
例子:var text=window.prompt("请输入地址","");//参数2:默认文字
与定时器有关的方法
(**)setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。 循环执行
clearInterval() 取消由 setInterval() 设置的 timeout。
(**)setTimeout() 在指定的毫秒数后调用函数或计算表达式。 只执行一次
参数:
参数1:字符串(js语句)或者 函数对象
参数2:毫秒值。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
例子:
设置定时器 3秒后要执行的函数
var id=window.setTimeout("window.close()",3000);
var id1=window.setTimeout("shut()",3000);
var id2=window.setTimeout(shut,3000);
funtion shut(){
window.close();
}
取消定时器 通过定时器的id 来取消
window.clearTimeout(id);
window.clearTimeout(id2);
与打开关闭有关的方法:
open():打开新窗口
参数:打开目标的URL
返回值:返回新打开窗口的window引用
例子:var newWindwo=window.open("http://www.baidu.com");
newWindwo.close();
close():关闭窗口
谁调用我 , 我关谁
例子:window.close();
属性:
获取其他对象的属性:
history :对 History 对象的只读引用。
location :用于窗口或框架的 Location 对象。
Navigator 对 Navigator 对象的只读引用。
Screen 对 Screen 对象的只读引用。
document:对 Document 对象的只读引用。
Location:地址栏对象
获取方式:可以用window对象中的属性获取
var lc=window.location;
lc.href="http://www.baidu.com";
属性:
href:设置或获取当前的URL
History:历史记录对象
获取方式:可以用window对象中的属性获取
var ht=window.history;
ht.go(1);
方法:
go:
1:前进
-1:后退
Document Object Model 文档对象模型
概念:将标记语言文档的各个组成部分 封装为对象
组成:
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象
Document:文档对象
获取:window.document
//document 中 body属性 可以获取body标签对象
document.body.bgColor = "red";
//title 属性获取文档标题
var bt = document.title;
//获取文档最后一次修改时间
var rq=document.lastModified;
//URL 属性 获取地址栏中的地址
方法:
获取Element对象
getElementById():通过id属性值获取唯一的元素
getElementsByTagName():通过标签名称获取元素对象数组
getElementsByName():通过name属性值获取元素对象数组
getElementsByClassName():通过class属性值获取元素对象数组
创建其他对象
createElement:创建元素对象
createAttribute:创建属性对象
createComment:创建注释对象
createTextNode:创建文本对象
//给属性对象设置值
font1.setAttribute('color','yellow');
bd.remove(); 删除自己
bd.removeChild(div); //移除子元素
//根据属性名来移除标签上的属性
//div.removeAttribute("align");
//移除属性对象。你传入的是一个属性对象
//div.removeAttributeNode(attr);
例子:
var div4 = window.document.createElement("div");
var text1 = window.document.createTextNode("我是第四个div");
var v = div4.appendChild(text1);
document.getElementsByTagName("body")[0].appendChild(div4);
Element:元素对象
innerHTML属性:获取或设置 元素的 子内容
innerTEXT属性:获取标签之间的文本内容
事件
概念:
事件:一件事
事件源:事件发生的组件。
监听器:一个对象。当事件源上发生了事件,就执行对象中的某些方法
注册监听:将监听器绑定到事件源上,监听事件的发生
js中注册监听的方式:
1. 在定义标签时,添加 事件名称属性。属性值是js代码
js代码会被自动封装到一个function函数的方法体中
例子:<div id="div_id" onclick="fun();">hehe</div>
2. 通过js获取元素对象,再添加事件。
例子:
//1.获取元素对象
var input = document.getElementById("username");
//2.注册监听
input.onclick = function(){
//alert("hehe");
}
js中事件的种类:
焦点事件:针对表单
onfocus 元素获得焦点。
onblur 元素失去焦点
点击事件:
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
键盘事件:
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
通过事件对象event中的keyCode属性,可以获取键盘某个键的键码 其实就是ASCII码表中对按键的编码 e.keyCode
鼠标事件:
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmousemove 鼠标被移动。
鼠标按下时,通过事件对象 event中的属性 button 或 which 可以获取鼠标按键的编号。
e.button 事件对象中的 button属性可以获取鼠标按键的编号
e.which 也可以获取鼠标的按键编号 0 左键 1滚轮 2右键
表单事件:
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。
oninput 事件 当你往表单中输入内容时就触发
加载与卸载事件
onload 一张页面或一幅图像完成加载。
onunload 用户退出页面。 其他浏览器不支持 IE支持
其他事件:
针对表单
onchange 域的内容被改变。 比如下拉框
onselect 文本被选中。
JS事件对象 event中的属性和功能
属性:currentTarget: 获取的是绑定了该事件的元素对象
target : 获取的是触发了该事件的元素对象
type: 获取事件类型
keyCode 当绑定了键盘事件,可以从事件对象中获取按键的键码(ASCII码)
which/button 当绑定了鼠标事件,可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键
方法: e.stopPropagation() 阻止事件冒泡
e.preventDefault(); 阻止元素的默认行为