BOM, DOM,事件

BOM
浏览器对象模型
将浏览器的各个组成部分封装成对象。

组成:
* Window:窗口对象
* Navigator:浏览器对象
* Screen:显示器屏幕对象
* History:历史记录对象
* Location:地址栏对象

DOM
文档对象模型
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操
功能:控制html文档的内容
* 获取页面标签(元素)对象:Element
* document.getElementById(“id值”):通过元素的id获取元素对象

核心 DOM - 针对任何结构化文档的标准模型
* Document:文档对象
* Element:元素对象
* Attribute:属性对象
* Text:文本对象

Document:文档对象
1.创建:document
2.方法:
获取Element对象:
1. getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

Element:元素对象
1.创建:通过document来获取和创建
2.方法:
1. removeAttribute():删除属性
2. setAttribute():设置属性

HTMLDOM:
标签体的设置和获取:innerHTML

事件:
概念:某些组件被执行了某些操作后,触发某些代码的执行。
* 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
* 事件源:组件。如: 按钮 文本输入框…
* 监听器:代码。
* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。

常见的事件:

1. 点击事件:
	1. onclick:单击事件
	2. ondblclick:双击事件
		
		
2. 焦点事件
	1. onblur:失去焦点
	2. onfocus:元素获得焦点。


3. 加载事件:
	1. onload:一张页面或一幅图像完成加载。

4. 鼠标事件:
	1. onmousedown	鼠标按钮被按下。
	2. onmouseup	鼠标按键被松开。
	3. onmousemove	鼠标被移动。
	4. onmouseover	鼠标移到某元素之上。
	5. onmouseout	鼠标从某元素移开。
	
5. 键盘事件:
	1. onkeydown	某个键盘按键被按下。	
	2. onkeyup		某个键盘按键被松开。
	3. onkeypress	某个键盘按键被按下并松开。

6. 选择和改变
	1. onchange	域的内容被改变。
	2. onselect	文本被选中。

7. 表单事件:
	1. onsubmit	确认按钮被点击。
	2. onreset	重置按钮被点击。
BOMDOM是两个不同的概念,它们分别代表浏览器对象模型和文档对象模型。BOM主要涉及浏览器窗口和浏览器的相关属性和方法,而DOM则涉及网页文档的结构和内容。 举个例子来对比BOMDOM,假设我们要获取浏览器窗口的尺寸信息。在BOM中,我们可以使用window对象来获取窗口的尺寸信息,比如使用window.innerHeight和window.innerWidth来获取窗口的内部高度和宽度。而在DOM中,我们可以通过操作文档对象来获取网页元素的尺寸信息,比如使用document.documentElement.clientHeight和document.documentElement.clientWidth来获取文档元素的可见高度和宽度。 下面是一个示例代码,展示了如何使用BOMDOM来获取窗口尺寸信息: ```javascript // 使用BOM获取窗口尺寸信息 console.log(window.innerHeight); // 获取窗口的内部高度 console.log(window.innerWidth); // 获取窗口的内部宽度 console.log(window.outerHeight); // 获取窗口的外部高度(包括浏览器工具栏等) console.log(window.outerWidth); // 获取窗口的外部宽度(包括浏览器工具栏等) // 使用DOM获取文档元素尺寸信息 console.log(document.documentElement.clientHeight); // 获取文档元素的可见高度 console.log(document.documentElement.clientWidth); // 获取文档元素的可见宽度 ``` 通过以上代码,我们可以看到使用BOM的window对象和DOM的document对象来获取窗口和文档的尺寸信息的区别。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值