JavaScript高级部分

简介

介绍JavaScript的BOM、DOM以及事件监听机制。

BOM

概念:

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

组成:

• Window：窗口对象;
• Navigator：浏览器对象;
• Screen：显示器屏幕对象;
• History：历史记录对象;
• Location：地址栏对象。
• Window：窗口对象
  • 创建
  • 方法
    • alert() 显示带有一段消息和一个确认按钮的警告框。
    • confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
      • 如果用户点击确定按钮，则方法返回true,否则返回false。
    • prompt() 显示可提示用户输入的对话框。
      • 返回值：获取用户输入的值。
    • close() 关闭浏览器窗口
      • 谁调用我 ，我关谁
    • open() 打开一个新的浏览器窗口
      • 返回新的Window对象
    • setTimeout() 在指定的毫秒数后调用函数或计算表达式。
      • 参数:
        • js代码或者方法对象
        • 毫秒值
    • 返回值：唯一标识，用于取消定时器
    • clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
    • setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
    • clearInterval() 取消由 setInterval() 设置的 timeout。
  • 属性:
    • 获取其他BOM对象：
      history location Navigator Screen
    • 获取DOM对象
      document
  • 特点:
    • Window对象不需要创建可以直接使用 window使用。 window.方法名();
    • window引用可以省略。 方法名();
• Location：地址栏对象
  • 创建(获取)：
    • window.location
    • location
  • 方法：
    • reload() 重新加载当前文档。刷新
  • 属性
    • href 设置或返回完整的 URL。
• History：历史记录对象
  • 创建(获取):
    • window.history
    • history
  • 方法：
    • back() 加载 history 列表中的前一个 URL。
    • forward() 加载 history 列表中的下一个 URL。
    • go(参数) 加载 history 列表中的某个具体页面。
      • 参数：
        • 正数：前进几个历史记录
        • 负数：后退几个历史记录
  • 属性:
    • length 返回当前窗口历史列表中的 URL 数量。

DOM

概念

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

组成

• Document：文档对象
• Element：元素对象
• Attribute：属性对象
• Text：文本对象
• Comment:注释对象
• Node：节点对象，其他5个的父对象

常用方法

• window.document:创建(获取)document对象
• document:创建(获取)document对象
• getElementById():根据id属性值获取元素对象。id属性值一般唯一
• getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
• getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
• getElementsByName():根据name属性值获取元素对象们。返回值是一个数组
• createAttribute():创建属性对象
• createComment(): 创建注释对象
• createElement():创建元素对象
• createTextNode(): 创建节点对象
• removeAttribute():删除属性
• setAttribute():设置属性
• appendChild():向节点的子节点列表的结尾添加新的子节点
• removeChild():删除（并返回）当前节点的指定子节点
• replaceChild():用新节点替换一个子节点

HTML DOM

概念

标签体的设置和获取：innerHTML，使用html元素对象的属性。

方法

• style：利用style来设置元素属性格式
• 例:
  div1.style.border = "1px solid red";
  div1.style.width = "200px";
  div1.style.fontSize = "20px";

事件监听机制

概念

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

常用方法

• onclick:单击事件
• ondblclick:双击事件
• onblur:失去焦点
• onfocus:元素获得焦点
• onload:一张页面或一幅图像完成加载
• onmousedown:鼠标按钮被按下
• onmouseup:鼠标按键被松开
• onmousemove:鼠标被移动
• onmouseover:鼠标移到某元素之上
• onmouseout:鼠标从某元素移开
• onkeydown:某个键盘按键被按下
• onkeyup:某个键盘按键被松开
• onkeypress:某个键盘按键被按下并松开
• onchange:域的内容被改变
• onselect:文本被选中
• onsubmit:确认按钮被点击
• onreset:重置按钮被点击

Gitee代码地址

https://gitee.com/zhuayng/FontEndBasis/blob/develop/JavaScriptBasis/javascript_complex_demo.html