js 中的 DOM 和 BOM
BOM浏览器对象模型
概念：Browser Object Model
组成：
-
Window:浏览器窗口对象
-
Navigator:浏览器对象
-
screen:显示器屏幕对象
-
History:历史记录对象
-
Location:地址栏对象
Window：浏览器窗口对象
1.创建
不用创建，直接使用Window对象中的属性和方法
2.方法的使用
-
与弹出框有关的方法
-
alert() :显示带有一段消息和确认按钮的警告框。
-
confirm() :重点关注 显示带有一段消息以及确认按钮!取消按钮的对话框。
如果点击确认，那么该方法返回一个true值；如果点击取消，那么该方法返回一个false值 -
prompt():显示可提示用户输入的对话框。
如果点击确认，那么该方法返回输入框中输入的值;如果点击取消,那么该方法就不返回输入框输入的值 -
与打开与关闭浏览器窗口的方法
-
close() :关闭浏览器窗口。
-
open():打开一个新的浏览器窗口或查找一个己命名的窗口。
-
与定时器相关的方法
-
- setlnterval()按照指定的周期(以毫秒计）来调用函数或计算表达式。
-
setTimeout()在指定的毫秒数后调用函数或计算表达式。
-
clearInterval()取消由setInterval()设置的 timeout。
-
clearTimeout()取消由setTimeout()方法设置的timeout。
3.属性的使用
1.获取其他的BOM对象
- history
- location
- Navigator
- Screen
2.获取DOM对象
- document：文档对象
4.对象的特点
-
window对象不需要创建，直接使用，window.属性名/方法名，前面的window还可以省略不写
-
可以通过window对象获取其他的BOM对象和DOM对象
Location地址栏对象
Location对象包含有关当前URL的信息。
1.创建:通过window对象来获取 window.location,前面的window可以省略不写
⒉属性:href设置或返回完整的URL。
3.方法:
1. reload0重新加载当前文档。刷新动作
2. replace()：用新的文档替换当前文档。
History历史记录对象
1.创建：通过window对象来换器历史记录对象 window.history,前面的window可以省略不写
2.方法：
-
forward()加载history列表中的下一个 URL。
-
back()加载 history 列表中的前一个URL。
-
go()加载 history列表中的某个具体页面。
3.属性
length返回浏览器历史列表中的URL数量。
DOM对象
-
Document---文档对象
-
Element---元素对象
-
Attribute----属性对象
-
Text----文本对象
-
Comment---注释对象- Node----节点对象
XML DOM内容--针对XML文档的标准模型
HTML DOM-针对HTML文档的标准模型
Document文档对象
1.创建
通过window对象获取文档对象 window.document, windom可以省略不写。
2.方法
- 通过Element元素对象：
1.getElementById()通过id名称获取id名称对应的元素对象。ID属性值一般唯一
2.getElementByTagName()通过标签名称获取对应的元素对象。返回的是一个对象数组
3.getElementsByClassName() 通过class属性值获取对应的元素对象数组
4.getElementsByName() 通过name属性值换器对应的元素对象。返回的是一个对象数组
- 创建其他DOM对象
1.createComment() 创建注释节点。
2.createElement()创建元素节点。
3.createTextNode()创建文本节点。
4.createAttribute(name)创建拥有指定名称的属性节点，并返回新的Attry对象。
3.属性
title 返回当前文档的标题。
URL 返回当前文档的 URL。
4.特点
Comment注释对象
Element元素对象
1.创建
有两种方式创建
- 通过文档document的获取元素对象的方法来获取元素对象
- 通过document.createElement() 来创建元素对象
2.方法
3.属性
4.特点
Node节点对象
节点对象可以是元素节点，属性节点，文本节点，任何节点都有父节点和子节点，但是文本节点没有子节点
方法：
CRUD操作 添加节点 删除节点 查找节点 修改节点(替换节点)
- 添加节点 appendChild() 向父节点中添加子节点
- 删除节点 removeChild() 从父节点中删除子节点
- 替换节点 replaceChild() 用一个新节点替换原来的节点
属性：
parentNode：获取子节点的父节点
childNodes: 获取父节点的所有的子节点
firstChild：获取父节点中的第一个子节点
lastChild: 获取父节点中的最后一个子节点
Event 事件对象
概念：某些组件被执行了一些操作，会触发一些功能效果。
事件有几个因素：
事件：某些操作(功能、方法)。如 点击、双击、键盘按下、键盘弹起.......
事件源：组件 被操作的对象 元素/标签 输入框、超链接、按钮.....
监听器：Listener Filter Servlet(服务中间件，桥梁) HTML CSS JS，执行事件的代码
注册监听：将事件、事件源、监听器三者绑定到一起。当事件源上发生了某个事件，则会触发执行某个监听器代码。
常见的事件：
- 点击事件
点击事件： onclick
双击事件： ondblclick
- 焦点事件
获取焦点： onfocus
失去焦点 onblur
-
加载事件
onload 一个页面或者一张图像完成加载
-
鼠标事件
鼠标按键按下： onmousedown
鼠标按键松开： onmouseup
鼠标离开： onmouseout
鼠标移动： onmousemove
鼠标悬浮到某元素上：onmouseover
- 键盘事件
键盘按下： onkeydown
键盘松开： onkeyup
键盘按下并松开： onkeypress
- 表单事件
表单提交：onsubmit
表单重置：onreset
- 选择和改变事件
onchange 文本内容发生改变触发
onselect 文本被选中触发
HTML DOM 标签对象
-
标签体内容获取和设置 属性： innerHTML(可以插入文本内容和标签以及组合标签) innerText(插入文本内容)
-
使用html标签对象拥有的属性
-
通过标签对象更改标签的样式： style 通过style属性设置css样式
div.style.border = "1px solid black";
div.style.background = "red";
div.style.backgroundImage = "url(图像路径)"
一般不推荐 使用css代码提前设置
通过className属性给该标签设置对应的class值
