JS的DOM和BOM对象

BOM对象

浏览器对象模型

概念：Browser Object Model

组成：

• Window：浏览器窗口对象
• Navigator：浏览器对象
• Screen：显示器屏幕对象
• History：历史记录对象
• Location：地址栏对象

Window：浏览器窗口对象

1.对象创建

不用创建，直接使用Window对象中的属性和方法

window 属性等价于 self 属性，它包含了对窗口自身的引用。

2.方法的使用

与弹出框有关的方法

alert() ：显示带有一段消息和确认按钮的警告框

confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。重点关注

​ 如果点击确认：那么该方法返回一个true值

​ 如果点击取消：那么该方法返回一个false值

​ 可以根据id值及进行删除，关联后台进行删除动作

prompt() ：显示可提示用户输入的对话框

​ 如果点击确认：那么该方法返回输入框输入的值。

​ 如果点击取消：那么该方法就不返回输入框输入的值。

与打开与关闭浏览器窗口的方法

close() ：关闭浏览器窗口

open() ：打开一个新的浏览器窗口或查找一个已命名的窗口。open()内可以写打开的窗口的地址

与定时器相关的方法

setInterval() ： 按照指定的周期（以毫秒计）来调用函数或计算表达式。

setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

需要两个参数:
1.定时器加载的方法体内容
2.定时器间隔时间执行
有返回值,是该定时器的唯一时间标识

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

3.属性的使用

1.获取其他的BOM对象

• history：历史记录对象
• location：地址栏对象
• Navigator：浏览器对象
• Screen：显示器屏幕对象

2.获取DOM对象

• document：文档对象

4.对象的特点

• window对象不需要创建，直接使用，window.属性名/方法名，前面的window还可以省略不写
• 可以通过window对象获取其他的BOM对象和DOM对象3

---

地址栏对象

Location 对象包含有关当前 URL 的信息

1.对象创建

通过window对象来获取 window.location，前面的window可以省略不写

2.属性

​ href：设置或返回完整的URL。

​ hosename：获取当前url指定的服务器的主机名

3.方法

reload() ：重新加载当前文档。刷新动作

replace() ：用新的文档替换当前文档。

---

History历史记录对象

1.创建

通过window对象来获取历史记录对象 window.history，前面的window可以省略不写

2.方法

forward()：加载 history 列表中的下一个 URL。

back()：加载 history 列表中的前一个 URL。

go()：加载 history 列表中的某个具体页面。

​ 数字参数 number
​ 正数:1 前进下一个url地址; 2 前进下两个url地址
​ 负数:-1返回上一个url地址; -2 返回上两个url地址

3.属性

length ：返回浏览器历史列表中的URL数量

---

DOM对象

“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

核心DOM内容 ↓

• Document—>文档对象
• Element—>元素对象
• Attribute —>属性队形
• TextNode—>文本队形
• Comment：–>注释对象
• Node—>节点对象

XML DOM内容–>针对XML 文档的标准模型

HRML DOM内容–>针对HTML 文档的标准模型

Document文档对象

1.创建

​ 通过window对象获取文档对象 Windows.docment，window可以省略不写

2.方法

• 获取Element元素对象的方法

  • getElementByid("id名称") ： 通过id名称获取id名称对应的元素对象。
  • getElementsByTagName("标签名称")：通过标签名称获取对应的元素数字，返回的是一个对象数组
  • getElementBysClassName("class名称") ：通过class属性值获取对应的js元素对象。返回的是一个对象数组
  • getElementByName("name属性值") ：通过name属性值获取对应的元素对象，返回的是一个对象数组

• 创建其他DOM对象

  • createComment("注释") ：创建注释节点
  • createElement("标签名称") ：创建元素节点
  • createTextNode("文本内容") ：创建文本节
  • createAttribute("属性")

3.属性

• title 返回当前文档的标题。

• URL 返回当前文档的 URL。

Comment注释对象

Element元素对象

1.创建

有两种方式

• 通过文档document的获取元素对象的方法来获取元素对象
• 通过document.createElement()来创建元素对象

2.方法

setAttribute() 添加新属性
setAttributeNS() 添加新属性。

Node节点对象

节点对象可以是元素节点，属性节点，文本节点。任何节点都有父节点和子节点，但是文本节点没有子节点

方法：

添加，删除，查找，修改(替换)节点；

• 添加节点：appendChild() ：向父节点中添加子节点
• 删除节点：removeChild() ：从父节点中删除子节点
• 替换节点：replaceChild() ：用一个新节点替换原来的节点

属性

• parentNodes() ：获取子节点的父节点
• childNodes ：获取父节点的所有的子节点
• firstChild ：获取父节点中的第一个子节点
• lastChild ：获取父节点中的最后一个子节点

Event事件对象

概念：某些组件被执行了一些操作，会触发一些功能效果。

事件有几个因素：
事件：某些操作(功能，方法)。如：单击，双击，键盘按下，键盘弹起

​ 事件源：组件 被操作的对象：元素/标签，输入框，超链接，按钮

​ 监听器：Listener(监听器) Filter(过滤器) Servlet(服务中间件，桥梁) 执行事件的代码

​ 注册监听：将事件，事件源，监听器三者绑定到一起。当事件源上发生了某个事件，则会触发执行某个监听器代码。

常见的事件

• 点击事件
  单击事件：onclick
  双击事件：ondbclick

• 焦点事件

  获取焦点：onfocus
  失去焦点：onblur

• 加载事件
  页面或者一张图像完成加载：onload

• 鼠标事件
  鼠标按键按下：onmousedown
  鼠标按键松开：onmouseup
  鼠标按键谈起：
  鼠标离开：onmouseout
  鼠标移动：onmousemove
  鼠标悬浮到某元素上：onmouseover

• 键盘事件
  键盘按下：onkeydown
  键盘松开：onkeyup
  键盘按下并松开：onkeypress

• 表单事件
  表单提交：onsubmit
  表单重置：onreset

• 选择和改变事件
  文本内容发生改变：onchange
  文本被选中：onselect

HTML DOM 标签对象

1.标签体内容获取和设置

属性：innerHTML(可以插入文本内容和标签以及组合标签) innerText(插入文本内容)

2.使用html标签对象拥有的属性

3.通过标签对象更改标签样式：style 通过style属性设置css样式

​ div.style.border = “red”;

​ div.style.background = “red”;

​ div.style.backgroundimage = “url(图片类路径)”;

一般不推荐这样使用， 一般使用css代码提前设置样式，通过className属性给该标签设置对应的class值