一、BOM（Browser Object Model）浏览器对象模型

把浏览器的各个部分封装为对象
组成：

Window：窗口对象
Navigator：浏览器对象（了解，不怎么用得到）
Screen：显示器屏幕对象（了解，不怎么用得到）
History：历史记录对象
Location：地址栏对象

Window：窗口对象常用方法：

弹出框：

1.alert()方法、弹出一个警告框，参数可以写警告信息。
2.confirm()方法，弹出一个确认框，参数可以写提示信息，选确定返回true，选取消返回false。
3.prompt()方法，接收用户输入，返回值是用户输入的值。
打开、关闭：
1.close()方法：谁调用close方法就关闭谁。
2.open()方法：打开一个新的窗口，并返回window对象。
定时器：
1.setTimeout()方法、设置经过多少毫秒之后执行代码。
2.clearTimeout()方法、取消由 setTimeout() 方法设置的 timeout。

3.setInterval()方法、设置经过多少毫秒之后执行代码，循环执行。
4.clearInterval()方法、取消由 setInterval() 设置的 timeout。

Window对象的属性：

其他BOM对象：

history （window.history）
location（window.location）
Navigator（window.Navigator）
Screen:（window.Screen）

DOM对象：

document（window.document）

$\color{red}{注意：window均可以省略不写，例如直接用document就能使用dom对象，而不用写window.document。}$

Location对象：地址栏对象

常用方法:reload()、重新加载当前文档。
属性：href、设置或返回完整的URL地址栏的值。

History：历史记录对象

常用方法：

back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go(参数) 加载 history 列表中的某个具体页面。
- 参数：
  - 正数：前进几个历史记录
  - 负数：后退几个历史记录

属性：
length 返回当前窗口历史列表中的 URL 数量。

二、DOM（Document Object Model）文档对象模型

把文档的各个部分封装为对象，便于我们去CRUD

DOM标准：

核心 DOM - 针对任何结构化文档的标准模型
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment:注释对象
- Node：节点对象，其他5个的父对象
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

核心 DOM （document对象）

常用方法：

获取Element对象：

getElementById()：根据id属性值获取元素对象。id属性值一般唯一
getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

属性：

Element：元素对象
Element对象的常用方法：
1.removeAttribute()：删除属性
2.setAttribute():设置属性
Node:节点对象： 所有dom对象都可以被认为是一个节点
Node对象常用方法：
1.appendChild()：添加子节点，向节点的子节点列表的结尾添加新的子节点。
2.removeChild()：移除子节点，删除（并返回）当前节点的指定子节点。
3.replaceChild()：用新节点替换一个子节点。
Node对象的属性
parentNode：当前节点的父节点。

HTML DOM

1.标签体的设置和获取：innerHTML

使用html元素对象的属性
控制元素样式
- 1. 使用元素的style属性来设置
    如：
    //修改样式方式1
    div1.style.border = "1px solid red";
    div1.style.width = "200px";
    //font-size--> fontSize
    div1.style.fontSize = "20px";
- 1. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

三、常见的事件：

* 常见的事件：
    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  重置按钮被点击。

如何给元素对象绑定事件：

   var Element对象  = document.getElementById(String id)  //获取DOM对象
   Element对象.事件名 = function () {
             方法体
    }

#JavaScript—BOM、DOM#JavaWeb学习笔记(2020/2/26)