JavaScript高级知识点

一.BOM

概念

BOM，全称是Browser Object Model 浏览器对象模型，主要是将浏览器的各个组成部分封装成对象。
组成

BOM主要有以下几种对象：
- Window
  
  窗口对象
- Navigator
  
  浏览器对象
- Screen
  
  显示屏幕对象
- History
  
  历史记录对象
- Location
  
  地址栏对象
BOM对象详解

BOM对象只了解常用的：Window对象，Location对象，History对象
- Window 窗口对象
  1. 创建
    
    Window对象不需要创建，直接可以用（它最大）
  2. 方法
    
    与弹出框有关的方法：
    - alert()：显示带有一段消息和一个确认按钮的警告框。
    - confirm()：显示带有一段消息和确认按钮以及取消按钮的对话框
      
      点击确认按钮，则返回true；点取消按钮，则返回false
    - prompt()：显示可提示用户输入的对话框，返回值是用户输入的值。
    与打开关闭相关的方法：
    - close()：关闭浏览器窗口。谁调用这个close，就关闭谁
    - open()：打开一个新的浏览器窗口，返回一个新的Window对象
    与定时器有关的方式：
    - setTimeout()：指定毫秒数，在毫秒数过后调用函数
      
      参数：
      1. js代码或者方法对象
      2. 毫秒值
      返回值：定时器ID，用于取消定时器
    - clearTimeout()：用于取消setTimeout()设置的定时器
    - setInterval()：指定毫秒为周期，调用函数（周期性调用）
    - clearInterval()：取消由setInterval()设置的定时器
  3. 属性
    - 获取其他BOM对象
      
      History，Location，Navigator，Screen都是通过window获取的。
    - 获取DOM对象：document
  4. 特点
    
    window对象不需要创建可以直接使用，使用方式：window.方法名()
    
    window引用可以省略，直接调用，方法名()
- Location：地址栏对象
  1. 获取
    
    window.location(可直接使用location)
  2. 方法
    - reload()：重新加载当前文档。（刷新）
  3. 属性
    - href：设置或返回完整的URL
- History：历史记录对象
  1. 获取
    
    window.history(可直接使用history)
  2. 方法
    - back()：加载history列表中的前一个URL，就跟浏览器的后退一样。
    - forward()：加载history列表中的下一个URL，就很浏览器的前进一样。
    - go(参数)：加载history列表中的某个具体页面。
      
      参数：
      
      正数：前进n个历史记录
      
      负数：后退n个历史记录
  3. 属性
    
    length：返回当前窗口历史列表表中的URL数量。

二.DOM

概念

DOM，全称是Document Object Model 文档对象模型

DOM是将标记语言文档(比如HTML)的各个组成部分封装为对象，可以操作这些对象，来对文档进行CRUD(增删改查)。
W3C DOM标准分类
- 核心DOM ：针对任何结构化文档的标准模型
  
  包含了：
  - Document：文档对象
    1. 创建：在html dom模型中使用window对象获取。
      
      window.document 或者 document
    2. 方法
      
      获取Element对象：
      - getElementById()：根据id属性值获取元素对象。
      - getElementByTagName()：根据标签名获取元素对象（不止一个，返回值是一个数组）
      - getElementByClassName()：根据Class属性值获取元素对象，返回值是一个数组。
      - getElementByName()：根据name属性获取元素对象，返回值是一个数组。
      创建其他DOM对象：
      - createAttribute(name)：方法创建并返回一个新的属性节点
      - createComment()：方法用来创建并返回一个注释节点
      - createElement(tagName)：方法用于创建一个由标签名称 tagName 指定的 HTML 元素
      - createTextNode(data)：创建一个新的文本节点
  - Element：元素对象
    1. 创建(获取)：通过document来获取和创建
    2. 方法：
      - removeAttribute()：删除属性
      - setAttribute()：设置属性
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
  - Node：节点对象，以上五个的父对象
    1. 特点：所有dom对象都可以认为是一个节点
    2. 方法：（增删改查 dom树）
      - appendChild()：向节点的子节点列表的结尾添加新的子节点
      - removeChild()：删除（并返回）当前节点的指定子节点
      - replaceChild()：用新节点替换一个子节点
    3. 属性：
      
      parentNode：返回父节点
- XML DOM：针对XML文档的标准模型
- HTML DOM：针对HTML文档的标准模型

三.事件

JavaScript常见的事件有以下一些：

点击事件
- onclick：单击事件
- ondblclick：双击事件
焦点事件
- onblur：失去焦点事件，一般用于表单验证
- onfocus：元素获得焦点
加载事件
- onload：页面加载完成
鼠标事件
- onmousedown：鼠标按钮被按下
  
  定义方法时，定义一个形参，接收event对象。
  
  event对象的button属性可以获取鼠标按钮键被点击了：0是左键，1是滚轮，2是右键
- onmouseup：鼠标按键被松开
- onmousemove：鼠标移动到某元素之上
- onmouseout：鼠标从某元素移开
- onmousemove：鼠标被移动
键盘事件
- onkeydown：某个键盘按键被按下
  
  定义方法时，定义一个形参，接收event对象。
  
  event对象的key属性可以获取键盘的键值。
- onkeyup：某个键盘按键被松开
- onkeypress：某个键盘按键被按下并松开
选择和改变
- onchange：域的内容被改变
- onselect：文本被选中
表单事件
- onsubmit：确认按钮被点击
  
  可以阻止表单的提交：方法返回false则表单被阻止提交。
- onreset：重置按钮被点击

JavaScript高级知识点

一.BOM

二.DOM

三.事件

推荐阅读