【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,则表单被阻止提交

本文链接http://www.taodudu.cc/news/show-82888.html