【JavaScript】part2

【JavaScript】part2

BOM

BOM：Browser Object Model，浏览器对象模型，将浏览器的各个组成部分封装成对象。

组成：

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

Window对象

• 创建：Window对象不需要创建可以直接使用window

• 方法：

  • 与弹出框有关的方法：

    方法	含义
    alert()	显示带有一段消息和一个确认按钮的警告框。
    confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。如点确认，返回true，反之返回false。
    prompt()	显示可提示用户输入的对话框。

  • 与打开关闭有关的方法：

    方法	含义
    open()	打开一个新的浏览器窗口或查找一个已命名的窗口，返回一个新的Window对象。
    close()	关闭浏览器窗口，谁调用close方法关闭谁。

  • 与定时器有关的方法：

    方法	含义
    setTimeout()	在指定的毫秒数后调用函数或计算表达式。
    clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
    setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
    clearInterval()	取消由 setInterval()设置的 timeout。

• 属性:

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

• 特点：

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

Location对象

• 创建（获取）：
  1. window.location
  2. location
• 方法：
  • reload()：重新加载当前文档，刷新。
• 属性
  • href：可以获取当前路径，也可对其赋值来重写路径。

History对象

• 创建（获取）：
  1. window.history
  2. history
• 方法：
  • back()：加载history列表中的前一个URL。
  • forward()：加载history列表中的后一个URL。
  • go(参数)：加载history列表中的某个具体页面。
    • 参数：
    • 正数：前进几个历史记录
    • 负数：后退几个历史记录
• 属性
  • length：返回当前窗口历史列表中的URL数量。

DOM

DOM：Document Object Model，文档对象模型，将标记语言文档的各个组成部分封装成对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

核心 DOM

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

Document对象

• 创建（获取）：在html dom模型中可以使用window对象来获取：window.document或直接document

• 方法：

  1. 获取Element对象：

     方法	含义
     getElementById()	根据id书香值获取元素对象。id属性值一般唯一
     getElementsByTagName()	根据元素名称获取元素对象们
     getElementsByClassName()	根据Class的属性值获取元素对象们
     getElementsByName()	根据name的属性值获取元素对象们

  2. 创建其他DOM对象：createAttribute(name)、createComment()、createElement()、createTextNode()。

• 属性：

Element对象

• 获取（创建）：通过document对象来获取或创建
• 方法：
  • removeAttribute()：删除指定的属性值。
  • setAttribute()：设置属性值。

Node对象

• 特点：所有DOM对象都可以被认为是一个节点。

• 方法：

  • CRUD DOM树：

    方法	含义
    appendChild()	向节点的子节点列表的结尾添加新的子节点。
    removeChild()	删除（并返回）当前节点的指定子节点。
    replaceChild()	用新节点替换一个子节点。

• 属性

  • parentNode：返回当前节点的父节点

HTML DOM

1. 标签体的设置和获取：innerHTML
2. 使用HTML元素对象的属性
3. 控制元素的样式
   • 使用元素的style属性来设置
   • 提前在css代码中定义好选择器的样式，通过元素的className属性来设置其class属性值

事件监听机制

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

• 事件：某些操作，如：单击、双击、键盘被按下、鼠标移动
• 事件源：组件。如：按钮、文本输入框
• 监听器：代码。
• 注册监听：将事件源、监听器绑定在一起。当事件源上发生了某个时间，则触发执行某个监听器代码。

常见的事件

点击事件

1. onclick：单击事件
2. ondblclick：双击事件

焦点事件

1. onblur：失去焦点
   • 一般用于表单验证。
2. onfocus：获取焦点

加载事件

1. onload：一张页面或一幅图像完成加载
   • 用于当页面加载完成后再执行js代码。

鼠标事件

1. onmousedown：鼠标按钮被按下。
   • 定义方法时，定义一个形参，接收event对象。
   • event对象的button属性可以获取鼠标哪个键被点击了。
2. onmouseup：鼠标按键被松开。
3. onmousemove：鼠标被移动。
4. onmouseout：鼠标从某元素移开。
5. onmouseover：鼠标移到某元素之上。

键盘事件

1. onkeydown：某个键盘按键被按下。
2. onkeypress：某个键盘按键被按下并松开。
3. onkeyup：某个键盘按键被松开。

选中和改变事件

1. onchange：域的内容被改变。
2. onselect：文本被选中。

表单事件

1. onreset：重置按钮被点击。
2. onsubmit：确认按钮被点击。
   • 可以阻止表单的提交，方法返回false，则表单被阻止提交