【JavaScript(二)】:BOM+DOM+事件监听
文章目录
一、BOM:
1.概念
-
概念:Browser Object Model 浏览器对象模型
-
将浏览器的各个组成部分封装成对象。
2.组成:
Window
:窗口对象Navigator
:浏览器对象Screen
:显示器屏幕对象History
:历史记录对象Location
:地址栏对象
3.Window
:窗口对象
-
创建
-
方法
-
与弹出框有关的方法:
alert()
显示带有一段消息和一个确认按钮的警告框。
confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框。``- 如果用户点击确定按钮,则方法返回true
- 如果用户点击取消按钮,则方法返回false
prompt()
显示可提示用户输入的对话框。- 返回值:获取用户输入的值
-
与打开关闭有关的方法:
close() 关闭浏览器窗口。
* 谁调用我 ,我关谁
open()
打开一个新的浏览器窗口
* 返回新的Window对象 -
与定时器有关的方式
setTimeout()
在指定的毫秒数后调用函数或计算表达式。
参数列表:
1.js
代码或者方法对象
2.毫秒值
返回值:唯一标识,用于取消定时器
clearTimeout()
取消由setTimeout()
方法设置的 timeout。
setInterval()
按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval()
取消由 setInterval() 设置的 timeout。
-
-
属性:
- 获取其他
BOM
对象:
history
location
Navigator
Screen:
- 获取DOM对象
document
- 获取其他
-
特点
- Window对象不需要创建可以直接使用 window使用。
window.方法名();
- window引用可以省略。
方法名();
- Window对象不需要创建可以直接使用 window使用。
4.Location
:地址栏对象
-
创建(获取):
window.location
location
-
方法:
reload()
重新加载当前文档。刷新
-
属性
href
设置或返回完整的 URL。
5.History
:历史记录对象
-
创建(获取):
window.history
history
-
方法:
back()
加载 history 列表中的前一个 URL。forward()
加载 history 列表中的下一个 URL。go(参数)
加载 history 列表中的某个具体页面。- 参数:
- 正数:前进几个历史记录
- 负数:后退几个历史记录
- 参数:
-
属性:
length
返回当前窗口历史列表中的 URL 数量。
二、DOM
1. 概念:
- 概念:Document Object Model 文档对象模型
- 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
2. W3C
(万维网) DOM 标准
- 共分为 3 个不同的部分:核心 DOM + XML DOM + HTML DOM
- 核心 DOM - 针对任何结构化文档的标准模型
-
Document
:文档对象 -
Element
:元素对象 -
Attribute
:属性对象 -
Text
:文本对象 -
Comment
:注释对象 -
Node
:节点对象,其他5个的父对象
-
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
3. 核心DOM
Document
:文档对象- 创建(获取):在
html dom
模型中可以使用window对象来获取window.document
document
- 方法:
- 获取Element对象:
getElementById()
: 根据id属性值获取元素对象。id属性值一般
唯一getElementsByTagName()
:根据元素名称获取元素对象们。返回值是一个数组getElementsByClassName()
:根据Class属性值获取元素对象们。返回值是一个数组getElementsByName()
: 根据name属性值获取元素对象们。返回值是一个数组
- 创建其他DOM对象:
createAttribute(name)
createComment()
createElement()
createTextNode()
- 获取Element对象:
- 属性
- 创建(获取):在
Element
:元素对象- 获取/创建:通过document来获取和创建
- 方法:
removeAttribute()
:删除属性setAttribute()
:设置属性
Node
:节点对象,其他5个的父对象- 特点:所有
dom
对象都可以被认为是一个节点 - 方法:
- CRUD
dom
树:appendChild()
:向节点的子节点列表的结尾添加新的子节点。removeChild()
:删除(并返回)当前节点的指定子节点。replaceChild()
:用新节点替换一个子节点。
- CRUD
- 属性:
parentNode
返回节点的父节点。
- 特点:所有
4. HTML DOM
- 标签体的设置和获取:
innerHTML
- 使用
html
元素对象的属性 - 控制元素样式
-
使用元素的style属性来设置
如://修改样式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; //font-size--> fontSize div1.style.fontSize = "20px";
-
提前定义好类选择器的样式,通过元素的
className
属性来设置其class属性值。
-
三、事件监听机制(重要)
1. 概念:
- 基础概念:某些组件被执行了某些操作后,触发某些代码的执行。
- 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
- 事件源:组件。如: 按钮 文本输入框…
- 监听器:代码。
- 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
2. 常见的事件:
- 点击事件:
onclick
:单击事件ondblclick
:双击事件
- 焦点事件
onblur
:失去焦点onfocus
:元素获得焦点。
- 加载事件:
onload
:一张页面或一幅图像完成加载。
- 鼠标事件:
onmousedown
鼠标按钮被按下。onmouseup
鼠标按键被松开。onmousemove
鼠标被移动。onmouseover
鼠标移到某元素之上。onmouseout
鼠标从某元素移开。
- 键盘事件:
onkeydown
某个键盘按键被按下。onkeyup
某个键盘按键被松开。onkeypress
某个键盘按键被按下并松开。
- 选择和改变
onchange
域的内容被改变。onselect
文本被选中。
- 表单事件:
onsubmit
确认按钮被点击。onreset
重置按钮被点击。