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() 关闭浏览器窗口。
         * 谁调用我 ，我关谁 newWindow.close();
         open() 打开一个新的浏览器窗口
         * 返回新的Window对象 newWindow = open(“https://www.baidu.com”);

      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。
      • search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

5. 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 返回节点的父节点。

• 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属性值。