BOM和DOM

学习时间

2021-03-03

学习内容

BOM：浏览器对象模型(Browser Object Model )

概念：
浏览器的各个组成部分封装为对象

特点：
BOM对象不能自己创建，当文档加载进内存，浏览器自动创建。

组成：
Window()：窗口对象
Location()：地址栏对象
History()：历史记录(当前窗口)对象、
Navigator ：浏览器对象
Screen：显示器屏幕
availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
Window：窗口对象

使用方式：
window.方法名(); window 可以省略
方法名;

方法：

与弹出有关的方法
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。

与定时器有关的方法

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式 循环执行
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。 只执行一次

参数：
参数1：字符串(js语句)或者 函数对象
参数2：毫秒值。

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

与打开关闭有关的方法：

open():打开新窗口

• 参数：打开目标的URL
• 返回值：返回新打开窗口的window引用

close():关闭窗口

• 谁调用， 关闭谁。

属性：
获取其他对象的属性：

• history ：对 History 对象的只读引用
• location ：用于窗口或框架的 Location 对象
• Navigator 对 Navigator 对象的只读引用
• Screen 对 Screen 对象的只读引用
• document：对 Document 对象的只读引用

DOM：文档对象模型(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’);

Element:元素对象
innerHTML属性：获取或设置元素的子内容
innerTEXT属性:获取标签之间的文本内容

事件

概念：

事件：一件事

事件源：事件发生的组件。

监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法

注册监听：将监听器绑定到事件源上，监听事件的发生

js中注册监听的方式：

在定义标签时，添加 事件名称属性 属性值是js代码
js代码会被自动封装到一个function函数的方法体中

1.获取元素对象
var input = document.getElementById(“username”);
2.注册监听
input.onclick = function(){
//alert(“hehe”);
}

js中事件的种类：

焦点事件：

onfocus 元素获得焦点。
onblur 元素失去焦点
点击事件：

onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
键盘事件：

onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
鼠标事件：

onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmousemove 鼠标被移动。
表单事件：

onsubmit 确认按钮被点击。
onreset 重置按钮被点击。
加载与卸载事件

onload 一张页面或一幅图像完成加载。
onunload 用户退出页面。 其他浏览器不支持 IE支持
其他事件：
针对表单

onchange 域的内容被改变。 比如下拉框

onselect 文本被选中。

/* 事件：一件事情
事件源：组件 标签
事件处理：处理函数
绑定事件：如何让这个标签具有这个事件
事件类型：单击，双击，
*/
//绑定事件的方式1:将事件写到标签内部
function show(){
alert(this);
alert(“谈了”);
}

//show();

//alert(this);

//方式2:使用代码来绑定
// document.getElementById(“btn1”).οnclick=function(){
// alert(“谈了”);
// }

var bts=document.getElementsByTagName(“button”);
for(var i=0;i<bts.length;i++){
bts[i].οndblclick=function(){
//alert(“谈谈”);
//this 当前的元素
//alert(this);
this.style.background=“red”;
}
}