Please enable JavaScript.

Coggle requires JavaScript to display documents.

Web APIs - Coggle Diagram

- - - - 文档对象模型
      - 把文档当做一个对象看待
      - 顶级对象是document
      - 主要学习操作页面元素
      - W3C标准
    - - 浏览器对象模型
      - 把浏览器当做一个对象看待
      - 学习浏览器窗口交互的对象
      - 顶级对象是Windows
      - 浏览器厂商在各自浏览器定义
  - - - 作用：当文档内容（图像，脚本，css文件等）完全加载完成时才会触发该事件,可以将js部分写在代码中的任意位置
      - 语法
        
        window.onload=function()
        
        window.addEventListener( " load " , function() { })
    - - 作用：DOM加载完毕，就可以执行，加载速度更快一点
      - 语法
        
        document.addEventListenter( ' DOMContentLoaded ' , function() {})
    - - 作用
        
        完成响应式布局，只要窗口大小发生变化，就会触发事件,经常和window.innerWidth结合使用
      - 语法
        
        window.onresize=function(){}
        
        window.addEventListener( " resize " , function() {} )
  - - - 同步和异步
      - 同步
        
        前一个任务结束后执行后一个任务，程序的执行顺序和任务的排列顺序一致
      - 异步
        
        在做一件事的同时，处理其他的事情
    - - 同步任务
        
        同步任务都在主线程上执行，形成一个执行栈
      - 异步任务
        
        异步任务是通过回调函数执行的
        
        一般有三类
        
        普通事件：click，resize
        
        资源加载：load，error
        
        定时器：setInterval，setTimeout
        
        异步任务相关回调函数添加到任务队列中
      - 执行步骤
        
        异步任务（回调函数）放入任务队列中
        
        一旦执行栈中的同步任务执行完毕，就会按次序读取任务队列中的异步任务，于是异步任务结束等待状态，进入执行栈，开始执行
        
        先执行执行栈中的同步任务
  - - - window对象提供的一个location属性，用于获取或设置窗体的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以这个属性也称为location对象
    - - location.host：返回主机（域名）
      - location.port：返回端口号，默认为空字符串
      - location.href：获取或设置整个URL
      - location.pathname：返回路径
      - location.search：返回参数
      - location.hash：返回片段#后面内容，常见于锚点链接
    - - location.assign()：跟href一样，也可以跳转页面，又名重定向页面
      - location.replace()：替换当前页面，不记录历史，所以不能后退
      - location.reload()：重新加载页面，如果参数为true则强制刷新
  - - - 与浏览器历史对象进行交互，该对象包含用户（在浏览器窗口中）访问过的URL
    - - back（）：后退功能
      - forward（）：前进功能
- - - - 文档
        
        一个页面就是一个文档，用document表示
      - 元素
        
        页面中的所有标签都是元素，用element表示
      - 节点
        
        网页中的所有内容都是节点，用node表示
      - DOM把以上元素都看做为对象
  - - - 变量名=document.getElementsByTagName( '标签名')
      - 返回的是获取对象的集合，以伪数组的形式存储，可以通过遍历的方式取出里面的对象
      - 不管页面中的该元素有几个，都返回伪数组的形式，0个元素则返回undefined
      - 指定父元素里面的所有子元素
        
        父元素ID.getElementsByTagName(' 子元素标签名 ')
        
        var 父元素ID=document.getElementById（'父元素标签名'）
    - - 变量名=document.getElementByClassName(' .类名')
      - console.log(变量名)
      - 取得集合后，根据索引号就可以将伪数组中的相应元素取出
    - - 变量名=document.getElementByld（'ID'）
      - 返回一个元素对象
    - - querySelector：返回指定选择器的第一个元素对象，里面需要加上符号
      - 选择类名：.类名
      - 选择ID：#ID
      - querySelectorAll：返回指定选择器的所有元素集合
    - - 获取body元素
        
        document.body
      - 获取HTML元素
        
        document.documentElement
  - - - 触发--响应机制，网页中的每个元素都可以产生某些触发JavaScript的事件
    - - 事件类型
        
        概念
        
        如何触发事件
      - 事件处理程序
        
        通过一个函数赋值的方式完成
      - 事件源
        
        事件被触发的对象，通过获取页面元素来完成
      - 案例
        
        var btn=document.getElementById(' btn ');
        
        btn.onclick=function(){ alert( ' 点秋香 ')；}
    - - 注册事件（绑定事件）
      - 添加事件处理程序（采取函数赋值形式
      - 获取事件源
    - - onclick:点击
      - onfocuse:获得焦点（表单）
      - onblur：失去焦点（表单）
      - onmouseover:鼠标经过触发
      - onmouseout：鼠标离开触发
      - onmousemove：鼠标移动触发
      - onmouseup：鼠标弹起触发
      - onmousedown：鼠标按下触发
  - - - 区别
        
        ②方便获取自定义属性（程序员自己添加的属性，为了区别每一组元素，如：index）
        
        ①是获取内置属性，是元素自带的属性
      - 方法
        
        ②element.getAttribute(' 属性 ')
        
        ①element.属性
    - - element.className的使用
        
        如果要保留原先的类：变量名/ this .className:' 原先类名新类名';
        
        注：className会直接更改元素的类名，会覆盖之前的
        
        在script的调用函数中写上：变量名/ this .className:' 类名';
        
        在body部分不用设置类名
        
        将类名样式写在style里面
      - js修改的元素样式将修改为行内样式，权重比较高
      - element.className类名样式操作（样式较多使用
      - element.style.属性名='....'或者this.style.属性名='......'
    - - 设置按钮使用一次后禁用
        
        this.disabled=true
        
        按钮变量名.disabled=true
      - 改变表单内的值，如文字只能用.value
    - - H5自定义属性
        
        获取H5自定义属性
        
        H5新增
        
        如果自定义属性里面有多个-连接的单词，采用驼峰命名法获取
        
        dataset是一个集合，里面存放了所有以data开头的自定义属性
        
        element.dataset[ ' index ' ]
        
        element.dataset.index
        
        兼容性获取
        
        element.getAttribute( ' data-index ')；
        
        自定义属性容易产生歧义，所以H5规定自定义属性以data-开头
        
        自定义属性目的
        
        为了保存并使用数据，让数据保存到页面中而不用保存到数据库中
      - ③移除元素属性
        
        element.removeAttribute(' 属性 ')
      - ②修改自定义属性
        
        修改类名（特殊）：div.setAttribute(' class'，' footer ')；
        
        例如：div . setAttribute(' index' ，' 2 ')；
        
        element.setAttribute（' 属性 ',' 值 '）
      - ①修改内置属性
        
        例如：img.src='img/....';
        
        标签名.属性名=' 属性值 '
    - - element.innerHTML（常用）：识别HTML中的样式标签，可以改变内容和样式,保留空格和换行
      - element.innerText:不识别HTML中的样式标签，只改变文字内容，去除空格和换行
    - - 为什么学习节点操作
        
        使用DOM的方法操作元素，逻辑性不强，比较繁琐
        
        节点层级关系获取元素逻辑性强，但是兼容性较差
      - 概念
        
        页面中的所有内容都是节点（标签，属性，文本，注释等），使用node来表示，所有的节点都可以使用js进行访问，所有节点都可以修改，创建或删除
        
        一般节点至少有三个属性：node Type，nodeName和nodeValue
        
        nodeType
        
        元素节点nodeType为1 常用
        
        属性节点nodeType为2
        
        文本节点（包括文字，空格，换行）nodetype为3
      - 节点层级
        
        作用：通过层级来获取不同的元素
        
        父级节点
        
        node.parentNode
        
        返回某节点的最近的父节点，如果指定节点没有父节点则返回NULL
        
        子节点
        
        parentNode.childNodes（不提倡）
        
        返回包含指定节点的子节点的集合，包括元素节点，文本节点等
        
        常用parentNode.children（非标准）
        
        是一个只读属性，返回所有的子元素节点，其余节点不返回
        
        如：ul.children
        
        第一个元素
        
        如：ol.children[ 0 ]
        
        最后一个元素
        
        ol.children[ ol. childrren .length -1 ]
        
        下一个兄弟元素节点(IE9以上
        
        如：ol.nextElementSibling
        
        上一个兄弟元素节点（IE9以上
        
        如：ol.previousElementsibling
        
        添加元素
        
        ①创建元素
        
        document.createElement(' tagName ')
        
        ②添加到某个节点的后面
        
        如：ul（父元素）. appendChild( li 子元素 )
        
        ②添加到某个节点的前面
        
        如：ul( 指定父元素元素）.insertBefore( 添加的子元素，ul.children[ 0 ] (父元素的指定元素))
        
        删除节点
        
        如：ul（父元素）.removeChild( ul . children[ 0 ] (指定的子元素）)
        
        只能删除子元素，如果要删除自己，代码如下：
        
        复制节点
        
        ①复制
        
        要复制的标签. cloneNode()
        
        ②放置
        
        跟添加元素的步骤一样
        
        注：如果cloneNode括号中的参数为空，则只复制标签，如果括号中的值为true，则复制标签和值
        
        将超链接中的链接设置为JavaScript：；可以不跳转页面，只实现某种功能
    - - document.write直接将内容写入页面的内容流，但是文档流执行完毕，会导致页面全部重绘（不常用
      - innerHTML将内容写入某个DOM节点，创建多个元素采用数组形式拼接效率最高
      - createElement：创建多个元素效率更低，但是结构更加清晰
      - innerHTML将内容写入某个DOM节点，不会导致页面重绘
- - - - 特点
        
        同一个元素同一个事件可以注册多个监听器
        
        按注册顺序依次执行
      - 语法格式
        
        eventTarget.addEventListenter( type,listenter[ , useCapture ])
        
        该方法将指定的监听器注册到evenTarget（目标对象）上，当对象触发指定事件，就会执行处理函数
        
        useCapture：可选参数，是一个布尔值，默认false
        
        type：事件类型字符串，如：click，mouseover,注意不带on，并是字符串要加引号
        
        listenter：事件处理函数，事件发生时，会调用该监听函数
        
        同一个元素，同一个事件可以添加多个监听器（事件处理程序）
      - 删除事件（解绑事件）
        
        方法
        
        传统方式：事件触发对象.事件类型=null
        
        新方法
        
        ②调用以下两个函数，在listenter位置写上函数名
        
        eventTarget.removeEventListenter( type,listenter[ , useCapture ])
        
        eventTarget.attachEventListenter( type,listenter[ , useCapture ])
        
        ①封装函数
        
        在注册事件时，将listenter改为函数名，在这之后以这个函数名创建事件
  - - - 事件流描述的是从页面中接收事件的顺序，事件发生时会在各个元素节点之间按照指定的顺序传播，这个传播过程叫做事件流
    - - 当前目标阶段
        
        当前捕获的元素位置
      - 冒泡阶段
        
        事件开始时从最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
      - 捕获阶段
        
        由DOM最顶层节点开始，逐级向下传播到最具体的元素接收的过程
    - - js代码中只能在执行捕获和冒泡中选其一
      - onclick和attachEvent只能得到冒泡阶段
      - addEventListenter的第三个参数
        
        如果是true，表示在事件捕获阶段调用处理程序
        
        如果是false（不写默认是false），表示事件在冒泡阶段调用处理程序
      - 实际开发中，更关注事件冒泡
      - 有一些事件是没有冒泡的，比如：onblur，onfocus等
    - - 语法结构
        
        对象名写到侦听函数的小括号（）里面
        
        事件对象只有有了事件才会存在，它是系统自动创建的，不需要传参
        
        事件对象是我们事件的一系列相关数据的集合，比如鼠标点击里面就包含了鼠标的相关信息，比如鼠标坐标
        
        事件对象可以自己命名，一般为' e '
      - 常见对象的属性和方法
        
        e.targrt：返回的是触发事件的对象（元素）
        
        this：返回的是绑定事件的对象（元素）
        
        阻止默认行为
        
        标准写法常用：对象名.preventDefault()
        
        低版本浏览器：对象名.returnValue
        
        return后面的代码不执行，只限传统的注册方式：return false
    - - 标准写法
        
        利用事件对象里面的stopPropagation（）方法
      - 低版本浏览器
        
        利用事件对象里面的cancelBubble=true来执行
    - - 原理
        
        不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
      - 作用
        
        只操作了一次DOM，提高程序性能
    - - contextmenu：用于取消默认的上下文菜单
      - selectstart：禁止选中文字
      - 常用写法
        
        document.addEventListenter(' selectstart ' , function ( e ))
        
        e.preventDefault()
    - - 获得鼠标在页面中的坐标
        
        相对于浏览器可视区
        
        e.clientX
        
        e.clientY
        
        相对于文档页面IE9+支持
        
        e.pageX
        
        e.pageY
      - 相对于电脑屏幕
        
        e.screenX
        
        e.screenY
    - - onkeydown：某个按键被按下时触发
      - onkeypress：某个按键被按下时触发，不识别功能键如ctrl，shift
      - onkeyup：某个按键被松开时触发
      - 三个事件的执行顺序：keydown--keypress--keyup
    - - keyup和keydown不区分字母大小写
      - keypress事件区分大小写
  - - - 语法
        
        window.setTImeout( 调用函数， [ 延迟的毫秒数 ])
        
        window在调用的时候可以省略
        
        延时单位是毫秒，可以省略默认是0
        
        调用函数可以直接写函数，也可以写函数名
        
        页面中可能有很多定时器，为区别不同，可以给不同的定时器取名
      - 设置一个定时器，该定时器在到期后执行调用函数
      - 回调函数
        
        概念
        
        这个函数需要等待时间，时间到了才会调用函数，上一件事情干完，再回头调用这个函数
      - 停止setTime定时器
        
        语法
        
        window.clearTimeout( 定时器的名字 )
    - - 语法
        
        window.setInterval( 回调函数， [ 间隔的毫秒数 ])
        
        window可以省略
        
        间隔的毫秒数默认是0，表示每隔多少毫秒就自动调用这个函数
        
        调用函数可以直接写函数，函数名或者采取字符串' 函数名（）'
        
        因为定时器很多，我们经常给定时器赋给一个标志符
      - 停止定时器
        
        语法
        
        window.clearInterval( 定时器的名字)
    - - 全局作用域或者普通函数中this指向全局对象window（定时器里面的this指向window）
      - 在方法调用中，谁调用this指向谁
      - 构造函数中this指向构造函数
- - - - 浏览器对象模型（BOM）
      - JavaScript语法（ECMAscript）
      - 页面文档对象模型（DOM）
        
        Web APIs
    - - 基本语法
    - - 主要学习页面交互功能