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值