JavaScript学习（三）——BOM及DOM对象

JavaScript学习（三）

BOM

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

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

2. 组成：

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

Window：窗口对象

1. 创建:无需创建，直接window使用

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引用可以省略。 方法名();

Location：地址栏对象

1. 创建(获取)：

   1. window.location
   2. location

2. 方法：

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

3. 属性

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

History：历史记录对象

1. 创建(获取)：

   1. window.history
   2. history

2. 方法：

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

3. 属性：

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

DOM

• 概念： Document Object Model 文档对象模型

  • 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

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

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

    • Document：文档对象

    • Element：元素对象

    • Attribute：属性对象

    • Text：文本对象

    • Comment:注释对象

    • Node：节点对象，其他5个的父对象

  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

• 核心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 返回节点的父节点。