1.复习内容

2.灵感代办

• JavaScript变量作用域复习

• 一定要注意代码执行渲染的顺序

3.学习内容

• BOM

  • window对象的属性

    • history

      • 提供操作历史记录的方法（后退，前进）
      • 只是当前窗口的历史记录

      • 属性：length

        • 保存当前窗口访问过的历史记录数量

      • 方法

        • back() 后退
        • forward() 前进
        • go(n) 正值前进n条，负值后退n条

      • 使用：

        • 超链接修改地址的url，会增加历史记录
        • 前进和后退不会增加历史记录，是指针的指向改变

      • 历史记录的进出栈

        • 后退按钮不会操作栈
        • 后退之后产生新的跳转会清栈（清除后退的栈）

    • location

      • 保存当前窗口的地址栏信息
      • 属性 ：href
        • 可读可写，读取或者设置当前窗口的URL
      • 方法：reload(false)
        • 功能：重载页面，刷新页面
        • 默认false，优先从缓存加载
        • 设置true，则强制从服务器目录请求

    • navigator/screen

    • windows中 on开头的？

      • 都是事件

• DOM

  1. 文档对象模型：

     1. 提供操作HTML文档的方法，核心对象为document对象

  2. 节点对象：

     1. JS对HTML文章中的标签，文本，属性，甚至注释都封装成对象，提供操作的方法

  3. 分类：

     1. 元素(标签，包含了文本和属性)，文本（文本内容），属性（标签属性），注释，文档

  4. 获取元素节点

     1. 根据标签名获取列表（返回节点列表）

        document.getElementsByTagName(“h1”);

     2. 根据类名获取列表（返回节点列表）

        document.getElementByClassName(“c1”);

     3. 根据那么属性值获取节点列表（返回节点列表）

        document.getElementsByName();

     4. 根据id属性值获取元素

        document.getElementById();

  5. 操作元素内容，

     • innerHTML: 用来读取设置元素节点的内容，可以识别标签语法
     • innetText: 不能识别标签语法
     • value：读取或者设置表单中的值

  6. 操作元素属性，

     1. 直接操作对象
        1. 简化，定义一个方法:$
        2. 直接赋值 id=“id” className=”“”; （class需要更名）
        3. 移除属性：赋空值“”,null(会显示出来，remove置空，看不见)
     2. 元素对象提供相关方法操作标签（class不需要更名）
        1. setAttribute(“attrName”,”value”)
        2. getAttribute(“attrName”)
        3. removeAttribute(“attrName”);

  7. 操作元素样式

     1. 通过操作id和class属性，对应选择器的样式
     2. 操作行内样式，操作style属性（动态操作常用）
        1. 字符串格式（和标签中写法一样）覆盖了css样式表中属性 style = “width:200px”;
        2. 对象格式 p.style.width = 200px;
        3. 所有出现连接符的属性都由-改为了驼峰,编程语言中（-是运算符号）

           font-size == fontSize()

  8. 元素节点的层次属性

     1. 获取父元素

        • parentNode()

     2. 获取子元素列表

        1. 属性值、

           • nodeName,nodeValue
           • nodeType:1：标签元素，2：属性，3：文字
           • childNodes 可以拿到标签内的文本节点，元素
           • children 常用，获取子元素，不包含文本节点

     3. 获取下一个兄弟节点

        • nextSibling（带文字节点）
        • nextElementSibling

     4. 获取上一个兄弟节点

        1. previousSibling（带文字节点）
        2. previousElementSibling

     5. 获取节点属性

        1. attributes 获取属性节点列表

  9. 节点的创建，添加，删除

     1. 创建节点

        1. createElement(“h1”); 返回创建好的元素节点

     2. 节点添加

        1. 节点的添加删除只能父元素操作
        2. 添加在父元素的末尾parentNode.appendChild(element)
        3. 指定位置添加parentNode.insertBefore(new,old)在已有位置插入新节点
        4. body作为document的属性存在，可以直接访问
        5. 一个节点，对应一个标签，多个标签，需要创建多个节点
        6. 文本节点：createTextNode()也是一个节点，需要追加到一个父节点之后，比如H1,H2

     3. 节点删除

        1. removeChild() 节点名称

• DOM事件处理

  • DOM事件介绍：

    • DOM事件：

      • 指的是用户的行为或元素的状态

    • DOM事件处理：

      • 元素去监听事件，事件发生后进行处理

    • 常用事件分类(on开始，全部都是小写)

      • 鼠标事件

        • onclick
        • ondblclick
        • onmouseover(鼠标移入)
        • onmouseout(鼠标移出)
        • oumousemove(鼠标移动)

      • 键盘事件

        • onkeydown 按下
        • onkeyup 抬起
        • onkeypress 字符按键被按下（fn shift 等不包括）

      • 文档，窗口或元素加载完毕

        • onload()
    • 事件绑定方式
    • 内联绑定：在元素上写明
    • 动态绑定：取到元素，动态添加

4.扩展延伸知识

• 字符串里面加入变量

  • 反引号加大括号 ${变量}
  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings

5.知识内容个人梳理

6.今天都复习了之前的什么内容