webapi
webapi
  webapi
    1.前端三老铁
      HTML： 确定结构
      CSS ： 确定样式
      JS ： 确定交互
    2. JS组成三部分
      ECMAScript : 确定js的语法规范
      DOM
        document object model : 操作(增删改查)网页内容
      BOM
        操作浏览器窗口
    3. web = dom + bom
      一套操作网页内容+浏览器窗口的 函数
        参数
        功能
        返回值
  DOM
    增删改查
      查
        查元素
          document.querySelector('选择器')
          document.querySelectorAll('选择器')
          两者区别
            querySelector() : 得到dom对象， 直接使用dom语法
            querySelectorAll() : 得到数组，不能直接使用dom语法。 一定要通过下标取出里面的dom对象，才可以使用dom语法
        查元素属性
          内容属性
            元素.innerText : 获取文本
            元素.innerHTML : 获取文本 + 标签
          HTML属性
            元素.属性名
            改图片：img.src
            改链接：a.href
          CSS属性
            单个修改： 元素.style.样式名 = 样式值
            多个修改： 元素.className = '类名'
            classList语法
              新增： 元素.classList.add('类名')
              移除： 元素.classList.remove('类名')
              切换： 元素.classList.toggle('类名')
            注意点：如果css属性有-，需要转小驼峰。(1)去掉- (2)-后面首字母大写
            css行内权重
          表单属性
            表单值(输入框文本)
              元素.value
            表单状态(布尔)
              是否禁用
                元素.disabled
              是否选中(radio与checkbox)
                元素.checked
              是否选中(option)
                元素.selected
        查节点
          查子元素
            父元素.children
          查兄弟元素
            上一个元素
              元素.previousElementSibling
            下一个元素
              元素.nextElementSibling
          查父元素
            元素.parentNode
      增
        (1)在内存创建空标签： document.createElement('标签名')
        (2)设置内容
        (3)添加到页面dom
          新增到最后面： 父元素.appendChild(元素)
          新增到元素前面： 父元素.insertBefore( 新增元素, 哪个元素前面 )
      删
        父元素.removeChild(子元素)
      改
  事件
    1.事件交互 三要素
      1. 事件源 ： 什么元素
      2.事件类型 ： 什么时刻
      3.事件处理函数
    2.注册事件
      事件源.事件类型 = 事件处理函数
        box.onclick = function(){ }
      事件源.addEventListener('事件类型',事件处理函数)
    3.事件注意点
      3.1 事件注册的时候不会执行。 （函数声明的时候不执行）
      3.2 用户触发事件,浏览器捕捉交互，自动帮我们调用事件处理函数 （浏览器自动调用函数）
    4.事件类型
      鼠标事件
        鼠标单击： onclick
        鼠标双击： ondblclick
        鼠标移入： onmouseenter
        鼠标移出： onmouseleave
        鼠标移动： onmousemove
      键盘事件
        输入事件： oninput
          实时获取输入框文本
        成为焦点： onfocus
        失去焦点： onblur
        键盘按下： onkeydown
          监听enter键
        键盘松开： onkeyup
      页面事件
        页面移动： window.onmousemove
        页面滚动： window.onscroll
          页面滚动距离 ： document.documentElement.scrollTop
        页面大小变化 : window.onresize
          页面视口宽度 ： document.documentElement.clientWidth
    5.事件对象
      1.事件对象作用 ：
        存储与事件相关的数据 （浏览器自动捕获鼠标坐标与键盘按键，自动存储对象）
      2.如何获取事件对象
        给事件处理函数添加形参 e
      3.事件对象常用属性
        e.pageX / e.pageY : 获取鼠标触发点 到 页面左上角距离
        e.key
          获取按键字符串 ‘Enter’ 'Tab'
        e.keyCode
          获取按键ASCII码 13
        e.preventDefalt()
          阻止form和a默认事件
        e.stopPropagation()
          阻止事件流
    6.事件流（事件冒泡与事件捕获）
      1.事件冒泡 ：
        触发元素事件，依次触发父级元素‘同名事件’
        元素->父元素->body->html->document->window
      2.事件捕获
        触发元素事件，从最顶级父元素依次往里触发‘同名事件’
        window->document->html->body->父元素->元素
      3.事件流三个阶段
        1.事件捕获
        2.事件目标
        3.事件冒泡
    7.事件委托
      1.事件委托 ： 给父元素注册，委托给子元素处理
        (1)给父元素注册事件
        (2)判断委托子元素
      2.事件委托原理 ： 事件冒泡
      3.事件委托注意点：
        不能用this, this指向父元素
        需要用e.target, 指向触发事件的子元素
      4.事件委托应用：
        动态新增元素注册事件
  网页特效
    offset家族
      获取元素 ‘自身’ 宽高与位置
      元素.offsetWidth / 元素.offsetHeight
        width+padding+border
      元素.offsetLeft / 元素.offsetTop
        自身 到 定位父元素 左/上 内边框距离
    scroll家族
      获取元素 ‘内容’ 宽高与位置
      元素.scrollWidth / 元素.scrollHeight
        内容宽高
      元素.scrollLeft / 元素.scrollTop
        内容位置 ： 滚动条滚动的距离
      应用
        固定导航
        回到顶部 设置页面scrollTop为0
    client家族
      获取元素 ‘可视区域’ 宽高与位置
      元素.clientWidth / 元素clientHeight
        视口大小
      元素.clientLeft / 元素.clientTop
        左边框和上边框宽度
      应用：响应式（横竖屏适配）
  BOM
    1.定时器
      1.定时器作用
        一段代码 间隔时间 反复执行
      2.定时器语法
        永久定时器 setInterval()
          开启： let timeID = setInterval( 回调函数, 时间间隔 )
          清除： clearInterval(timeID)
        一次定时器 setTimeout()
          开启： let timeID = setTimeout( 回调函数, 时间间隔 )
          清除： clearTimeout(timeID)
      3.定时器场景
        一次定时器： 3s消失广告
        永久定时器
          秒杀
          无限轮播
    2.五大对象
      window:浏览器窗口
        特点
          1.是js中的顶级对象, 所有的全局函数，对象都是window里面的成员
          2.window的成员使用时可以省略window
          3.window的top属性不能作为变量名
        方法
          打开窗口： window.open()
          关闭窗口： window.close()
        事件
          window.onload事件（入口函数）
            DOM树 + 外部资源 加载完毕后执行
          window.onbeforeunload事件（关闭事件）
            页面关闭的时候执行，一般用于存储数据
      location : 地址栏
        跳转网页 location.href = 'url'
        location.assign('url') : 跳转
        location.replace('url') : 替换（不能回退）
        location.reload() : 刷新
      history : 历史记录
        history.back() : 回退一页
        history.forward() : 前进一页
        history.go( 数字 )
          负数 ： 回退 -1页 -2页
          0 ： 刷新
          正数： 前进 1页 2页
      navigator : 用户信息（了解）
        naviagtor.userAgent
      screen : 用户电脑屏幕(了解)
    3.存储器 localStorage与sessionStorage
      1.作用一致：都是存储数据
        存储大小： 5MB
        只能存储字符串
      2.语法一致：
        设置：setItem('属性名',属性值)
        获取： getItem('属性名)
        删除： removeItem('属性名)
        清空： clear()
      3.面试点：两者区别
        localStorage ： 硬盘存储
        sessionStorage：内存存储
  正则
    1. 正则是 对字符串进行匹配运算 的对象
    2.作用 ： 对字符串进行匹配运算
      文本格式校验
        手机号
        验证码
        账号6-20
    3.语法
      (1)声明
        new RegExp('正则')
        /正则/
      （2）校验
        test() true:通过 false:不通过
    元字符
      []
      [^]
      .
      \
      ^
      $
      ?
      *
      +
      {}
      ()
      |
      字符类
      预定义类 \d : 数字 \w : 字母+数字+下划线_
      边界 严格匹配： /^$/
      量词
      分组
/* 学习目标： 两个查询函数语法
1.获取单个元素 ： document.querySelector('选择器')
2.获取多个元素 : document.querySelectorAll('选择器')
3.两者区别
querySelector() : 得到dom对象, 可以直接使用dom语法修改
querySelectorAll() : 得到数组, 不可以直接使用dom语法。 需要通过下标先取出里面的dom对象
*/
/**
* @description: 获取满足条件的第一个元素
* @param {string} 选择器字符串
* @return: dom对象 | null
*/
let box = document.querySelector('.box')
console.log( box )
/**
* @description: 获取满足条件 所有元素
* @param {string} 选择器字符串
* @return: 一定是伪数组 （有三要素下标、元素、长度。 但是没有数组方法 ）
*/
let boxList = document.querySelectorAll('.box')
console.log( boxList )
document.querySelectorAll('.box')[0].style.backgroundColor = 'red'
有则移除，无则新增