【JavaScript（二）】：BOM+DOM+事件监听

【JavaScript（二）】：BOM+DOM+事件监听

一、BOM:

1.概念

• 概念：Browser Object Model 浏览器对象模型

• 将浏览器的各个组成部分封装成对象。

2.组成：

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

3.Window：窗口对象

1. 创建

2. 方法

   1. 与弹出框有关的方法：
      alert() 显示带有一段消息和一个确认按钮的警告框。
      confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。``

      • 如果用户点击确定按钮，则方法返回true
      • 如果用户点击取消按钮，则方法返回false

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

      • 返回值：获取用户输入的值

   2. 与打开关闭有关的方法：
      close() 关闭浏览器窗口。
      * 谁调用我 ，我关谁
      open() 打开一个新的浏览器窗口
      * 返回新的Window对象

   3. 与定时器有关的方式
      setTimeout() 在指定的毫秒数后调用函数或计算表达式。
      参数列表：
      1.js代码或者方法对象
      2.毫秒值
      返回值：唯一标识，用于取消定时器
      clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
      setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
      clearInterval() 取消由 setInterval() 设置的 timeout。

3. 属性：

   1. 获取其他BOM对象：
      history
location
Navigator
Screen:
   2. 获取DOM对象
      document

4. 特点

   • Window对象不需要创建可以直接使用 window使用。 window.方法名();
   • window引用可以省略。 方法名();

4.Location：地址栏对象

1. 创建(获取)：

   1. window.location
   2. location

2. 方法：

   • reload() 重新加载当前文档。刷新

3. 属性

   • href 设置或返回完整的 URL。

5.History：历史记录对象

1. 创建(获取)：

   1. window.history
   2. history

2. 方法：

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

3. 属性：

   • 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：文档对象
  1. 创建(获取)：在html dom模型中可以使用window对象来获取
     1. window.document
     2. document
  2. 方法：
     1. 获取Element对象：
        1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
        2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
        3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
        4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
     2. 创建其他DOM对象：
        createAttribute(name)
createComment()
createElement()
createTextNode()
  3. 属性
• Element：元素对象
  1. 获取/创建：通过document来获取和创建
  2. 方法：
     1. removeAttribute()：删除属性
     2. setAttribute()：设置属性
• Node：节点对象，其他5个的父对象
  • 特点：所有dom对象都可以被认为是一个节点
  • 方法：
    • CRUD dom树：
      • appendChild()：向节点的子节点列表的结尾添加新的子节点。
      • removeChild() ：删除（并返回）当前节点的指定子节点。
      • replaceChild()：用新节点替换一个子节点。
  • 属性：
    • parentNode 返回节点的父节点。

4. HTML DOM

1. 标签体的设置和获取：innerHTML
2. 使用html元素对象的属性
3. 控制元素样式

   1. 使用元素的style属性来设置
      如：

       //修改样式方式1
           div1.style.border = "1px solid red";
           div1.style.width = "200px";
           //font-size--> fontSize
           div1.style.fontSize = "20px";
      

   2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

三、事件监听机制（重要）

1. 概念：

• 基础概念：某些组件被执行了某些操作后，触发某些代码的执行。

1. 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
2. 事件源：组件。如： 按钮 文本输入框…
3. 监听器：代码。
4. 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

2. 常见的事件：

1. 点击事件：
   • onclick：单击事件
   • ondblclick：双击事件
2. 焦点事件
   • onblur：失去焦点
   • onfocus:元素获得焦点。
3. 加载事件：
   • onload：一张页面或一幅图像完成加载。
4. 鼠标事件：
   • onmousedown 鼠标按钮被按下。
   • onmouseup 鼠标按键被松开。
   • onmousemove 鼠标被移动。
   • onmouseover 鼠标移到某元素之上。
   • onmouseout 鼠标从某元素移开。
5. 键盘事件：
   • onkeydown 某个键盘按键被按下。
   • onkeyup 某个键盘按键被松开。
   • onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
   • onchange 域的内容被改变。
   • onselect 文本被选中。
7. 表单事件：
   • onsubmit 确认按钮被点击。
   • onreset 重置按钮被点击。