JS-API

关于JS-API的思维导图，提供给程序员的实现功能的工具；接口的形式提供（接口）。

API

• 含义
  • 提供给程序员的实现功能的工具；接口的形式提供（接口）
• JS组成
  • JS
  • DOM
    • 文档对象模型 操作文档
  • BOM
    • 浏览器对象模型： 操作浏览器
  • web APIs
    • 含义
      • 提供给浏览器和页面元素的API
    • 特点
      • 函数
      • 输入/输出
• DOM
  • 简介
    • 文档对象模型(Document Object Model， 简称DOM) ， 是W3C组织推荐的处理可扩展标记语言(HTML 或者XML) 的标准编程接口。
  • DOM树
    • • 相关含义
        • 文档
          • 指页面：document
        • 元素
          • 指标签：element
        • 节点： node
          • 指网页中所有的内容
          • 分类
            • 标签/属性/文本/注释
        • 可以看成是一个对象
  • DOM操作
    • 获取元素
      • 方法
        • id获取
          • getElementByld()
            • 参数 说明
              • id
                • 大小写敏感
                • 唯一性
              • get：获得
              • By：通过
            • 返回
              • element对象
              • 找不到：null
            • 使用
              • 条件
                • 先有要获取的元素：把元素放到script前面（上到下加载）
            • 语法
              • document.getElementById(“id名称”)
                • 说明
                  • id名称：字符串（区分大小写）
                  • id要加引号
                  • 括号里面不需要加入#号
                • 返回：element对象
              • 查看详细返回值
                • console.dir
        • 标签名获取
          • getElementByTagName()
            • 作用：
              • 获取指定标签对象的子代集合
            • 说明
              • Tag：标签
              • name：名称
              • id:加在父级里面
            • 语法
              • 语法
                • document.getElementsByTagName('字符串')
                • 对象.getElementsByTagName('字符串')
                  • 对象可以是元素，比如div
                  • 先通过id获取，再通过这个获取里面的子元素(父级加id)
              • 字符串
                • 可以是元素名，比如div
                  • document.getElementsByTagName('div')
              • 依次打印元素：
                • 遍历
            • 返回
              • 伪数组
              • 举例
            • 特点
              • 存储：伪数组
              • 里面获取的元素是动态的：内容发生变化，也会一起变化
        • H5新增获取方法：
          • getElementsByClassName('类名')
            • 语法
              • document.getElementsByClassName('类名')
              • 说明
                • 小括号：字符串，元素class名称
            • 特点
              • 存储：伪数组形式
          • document.querySelector('选择器')
            • 语法
              • document.querySelector('选择器标识符')
            • 作用
              • 根据指定选择器返回第一个元素对象
            • 特点
              • 可以选择所有类型的元素
              • 选择第一个元素对象
          • document.querySelectorAll('选择器')
            • document.querySelectorAll('选择器标识符')
            • 语法说明
              • id，class等选择器，选择器标识符要加对应的标识符
            • 选择同一个选择器的所有元素
            • 特点
              • 选择所有元素对象
        • 特殊元素获取
          • 获取body
            • 语法
              • ducoment.body
          • 获取html
            • 语法
              • document.documentElement
    • 操作事件
      • 事件对象 操作事件对象
        • 含义
          • 触发响应的机制
        • 概述
          • 事件触发对象
            • 每个元素都可以触发
          • 事件组成
            • 事件源
              • 含义
                • 指事件被触发的对象
            • 事件处理程序
              • 含义
                • 通过函数赋值方式完成
              • 语法
                • 对象.事件类型= function() {}
            • 事件类型
              • 含义：
                • 指触发的类型（怎么触发）
              • 常见的类型
                • 点击
                  • onclick：单击
                  • ondblclick：双击
                • 焦点事件
                  • onblur：失去焦点
                  • onfocus：元素获得焦点
                • 加载完成事件
                  • onload
                • 鼠标事件
                  • 事件
                    • onmousedown：鼠标按下
                    • onmouseup：鼠标按键松开
                    • onmousemove：鼠标移动
                    • onmouseover / onmouseenter ：鼠标移到元素上
                    • onmouseout / onmouseleave ：鼠标移开 oncontextmenu 鼠标右键打开上下文菜单触发
                  • 属性
                    • button/which：获取按键编号
                • 键盘事件
                  • onkeydown：键盘按下
                  • onkeyup：键盘松开
                  • onkeypress：键盘按下并松开
                • 选择/改变
                  • onchange：域的内容被改变
                  • onselect：文本被选择
                • 表单事件
                  • onsubmit：确认按钮被点击
                • 多媒体事件
          • 常量
          • 事件对象属性
          • 事件对象的方法
          • 常见的事件对象分类
            • 鼠标/键盘事件对象
              • 属性
              • 方法
          • 语法
            • 选择对象
            • 建立事件
              • 对象.事件类型= function() {}
          • 事件执行的步骤
            • 获取事件源
            • 注册绑定事件
            • 添加事件处理程序（函数）
    • 操作元素
      • 改变元素内容
        • 方法
          • 对象.innerText
            • 语法
              • 对象.innerText = '值'
              • 举例
                • div.innerText = '2022'
              • 直接用函数建立事件。不需要添加事件
                • 语法： 对象.innerText = 函数名()
                  • 需要调用(封装好的)
            • 特点
              • 去掉html标签后，空格/换行符也会去掉
              • 不能选择html标签
              • 可以读写：可以获取对象里的内容
                • 对象.innerText
                • 不保留空格/换行符
          • 对象.innerHTML
            • 语法
              • 对象.innerHTML = '值'
              • 说明：类似
            • 特点
              • 识别HTML标签
              • w3c
              • 可以读写：可以获取对象里的内容
                • 保留空格/换行
      • 修改元素属性
        • 常见属性
        • 语法
          • 选择元素对象
            • 新建立一个变量接收
          • 绑定事件
          • 函数里（事件）修改属性
            • 点语法
              • 新建立的对象名.属性名='属性值'
      • 普通元素的操作
      • 表单元素的操作
        • 常见属性
          • type/value/checked/selected/disabled
        • 操作
          • 修改表单内容
            • value
              • 语法
                • 对象.value = '值'
              • 相关参数
                • this：指向函数调用者
                  • 语法：this.属性=’值‘
      • 样式属性操作
        • 分类
          • 行内样式
            • 语法：链式语法
              • 对象.style.属性=‘值’
                • 举例
                  • this.style.backgroundColor = 'purple'
              • 特点
              • 案例
                • 精灵图
                  • 核心算法
                    • for循环+背景位置(索引号*垂直精灵间距)
                  • 举例
          • 类名样式
            • 对象.className
              • 语法
                • 选择元素
                • 绑定事件
                • 程序处理
                  • 选择类名
                    • 头部style里面添加选择器名称样式
                      • 可以直接在里面更改样式
                    • 对象.className = 'class名称'
              • 特点
                • 保留原来的类名：多类名，把原来的类名加上
              • 举例
      • 同时操作多个元素(双for循环)
        • 原理：循环的排他算法
        • 执行步骤
          • 所有元素清除样式
          • 当前元素设置样式
        • 举例
      • 自定义属性的操作（自己添加的属性）
        • 1.获取属性值
          • 对象.属性
            • 特点
              • 获取本身自带的属性值
          • 对象.getAttribute('属性')
            • 特点
              • 获取自定义属性(自己添加的属性)
            • 举例：给元素添加索引号
        • 2.使用自定义属性的目的
          • 保存并使用数据
        • 3.特点
          • 容易引起歧义
        • H5新增的自定义属性
          • 语法（date开头）
            • date-属性=‘属性值’
          • 获取属性值
            • 对象.getAttribute('属性')
            • 新增：对象.dataset.属性 / 对象.dataset.['属性']
              • 自定义属性里面有多个-链接的单词
                • 语法
                  • 属性采取驼峰命名法
      • 设置属性值
        • 方法
          • 赋值
            • 语法：对象.属性='值'
          • 设置自定义属性
            • setAttribute('属性','值')
              • 特点
                • 自定义属性
            • 修改class值
              • 对象.setAttribute('class', 值)
      • 移除属性值
        • 方法
          • 语法
            • 对象.removeAttribute(‘属性’)
    • 操作节点
      • 节点概述
        • 基本属性
          • 节点类型（nodeType）
          • 节点名称(nodeName)
          • 节点值（nodeValue）
        • 节点层级
          • 父级节点
            • node.parentNode
            • 特点
              • 得到的是离元素最近的父级节点
                • 最近
              • 指定节点没有父级节点返回为null
          • 子代节点
            • 父级节点.childNodes
              • 子代节点的集合
              • 特点
                • 得到的是所有的子代节点，包括其他类型
                • 返回值：伪数组
              • 获得子代的元素节点
                • for循环+子元素的节点类型值设为1
                  • 举例
                • 父级节点.children
                  • 特点
                    • 返回值：伪数组
                      • 有索引
                      • length
            • 按顺序获取子代节点
              • 获得元素的第一个子代节点
                • firstChild
                  • 语法：父级节点.firstChild
                    • =
                      • 父级对象.children[0]
                  • 特点
                    • 获取的节点不管类型
                • fistElementChild
                  • 语法：父级节点.fistElementChild
                  • 特点：
                    • 获取第一个元素节点
                    • 缺点：兼容性问题(ie9)
                      • 解决办法：(实际开发)
                        • 语法：
                          • 父级对象.children[索引]
                        • 后面加索引号
              • 获得元素的最后一个子代节点
                • 语法：父级节点.lastChild
                  • • 父级节点.children[子代节点长度值-1]
                • 特点
                  • 获取的节点不管类型
                  • 缺点：兼容性问题(ie9)
                    • 解决办法：(实际开发)
                      • 语法：
                        • 父级对象.children[索引]
                      • 后面加索引号
          • 兄弟节点
            • 概述
              • 语法
                • 上一个
                  • node.previousSibling
                • 下一个
                  • node.nextSibling
                • 特点
                  • 获取的节点不管类型
              • 获得兄弟元素的元素节点
                • 语法
                  • node.nextElementSibling
                  • node.previousElemenSibling
                • 特点
                  • 兼容性问题：
                    • ie9以上
                    • 解决
                      • 封装函数：
        • 节点操作
          • 创建节点
            • 语法
              • 创建元素节点
              • 创建文本节点
                • document.createTextNode(“要添加的文本字符串”)
                  • 举例
            • 特点
            • 步骤
              • 创建节点
              • 添加节点
                • 方式：添加子代节点
                  • 后面追加
                    • 语法：
                      • node.appendChild(Child)
                        • 说明：
                          • 括号：子代结点名称
                          • node:父级节点
                    • 特点
                      • 后面追加元素
                      • 不能追加到字符串对象的里面
                  • 任意位置添加
                    • 语法：
                  • insertAdjacentHTML()
                    • 语法
                      • 父级对象.insertAdjacentHTML('插入的位置',text)
                      • 参数
                        • 插入的位置
                          • beforebegin
                            • 元素自身前面
                          • afterend
                            • 元素自身后面
                          • afterbegin
                            • 元素内部第一个子节点前面
                          • beforeend
                            • 元素内部最后一个子代节点后面
                        • text
                          • 要插入的字符串对象
                    • 特点
                      • 可以直接把字符串格式的的元素添加到父级
                      • 由于是动态获取元素，需要重新获取事件才能绑定事件
          • 删除节点
            • 语法
              • node.removeChild（child）
              • 返回：删除的节点
              • 作用
                • 删除父级节点中的子代节点
              • 特点
                • 删除后后面的元素往上排列,不占据原来的位置
            • 扩展：
              • 阻止链接跳转
                • javascript(0)
                • javascript:;
          • 复制（拷贝）节点
            • 语法
              • node.cloneNode()
            • 克隆步骤
              • 复制
              • 添加
            • 特点
              • 浅拷贝：只复制节点本身
              • 深拷贝
                • 参数值为true
                  • 复制节点和里面的内容
          • 动态创建节点的区别
            • • 1. document.write()
                • 作用
                  • 将一个文本字符串写入一个由 document.open（） 打开的文档流（document stream）
                • 举例
                  • document.write(' 799')
                • 特点
                  • 直接写入页面；文档流执行完毕，可能会导致页面重绘
                  • 使用特点
                    • 调用发生在 HTML 里的 标签中，那么它将不会自动调用
                      • 举例
                    • 和 document.writeln 在 XHTML 文档中不可用（控制台上会显示 “Operation is not supported”[] 的报错信息）。当打开本地的 .xhtml 格式的文件或任何其他 MIME 类型为 的文档时，均会报错
                • 语法
                  • document.write(要写入的字符串)
                  • 参数
                    • 可以为任意的数据类型
              • 2.element.createElement()
                • 作用
                  • 用于创建一个由标签名称 tagName 指定的 HTML 元素
                • 特点
                  • 效率高，消耗时间短(几十毫秒)
                  • 如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement
                • 语法
                  • 语法 var element = document.createElement(tagName[, options]);
                  • 参数
                    • 标签名称
                    • options
                      • 配置项
                  • 返回值
                    • 新建的元素
              • 3. .element.innerHTML()
                • 特点
                  • 效率低
                    • 解决办法
                      • 数组方法追加数据
              • 区别
          • 扩展
            • HTMLElement
              • 概述
                • 本质
                  • 接口
                • 作用
                  • 表示任何 HTML 元素。一些元素直接实现此接口，而其他元素则通过继承它的接口实现它
                • 属性
                  • 父级属性
                    • Element
                      • 概念
                        • 通用的基类，文档中的所有元素对象（即表示元素的对象）都继承自该基类
                        • 它只有所有元素共有的方法和属性
                      • 实例属性
                        • Element.classList
                          • 返回包含类属性列表的 DOMTokenList
                        • Element.className
                          • 用于设置元素的类属性
                        • Element.clientHeight
                          • 作用
                            • 返回一个数字，表示元素的内部高度
                          • 特点
                            • 返回整数（四舍五入取整）
                        • Element.clientLeft
                          • 作用
                            • 返回数字，表示元素左边框的宽度
                          • 特点
                            • 取整（四舍五入）
                            • 表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度
                            • 不含左边的内外边距
                          • 属性
                            • 1. style.borderLeftWidth
                              • 作用
                                • 获取元素左边框的宽度
                                • 设置或返回元素的左边框的宽度
                              • 语法
                                • 1.
                                • 2. 返回/获取 borderLeftWidth 属性
                        • Element.clientTop
                          • • borderTopWidth
                        • Element.clientWidth
                  • 实例属性
                    • HTMLElement.accessKey
                    • 02.
  • DOM-高级
    • 注册事件
      • 含义
        • 指给元素添加事件
      • 方法
        • 传统方式
          • 特点
            • on开头
            • 唯一性：
          • 语法
            • 事件3要素赋值式
            • 可以写在标签里面
              • 比如： <button onclick="alert('单击')">按钮</button>
        • 方法监听事件
          • 语法
            • addEventListener()
            • 说明
              • 参数
                • 里面的函数参数可以不需要加小括号调用：把函数放在外面，里面写函数名
                • 事件流阶段参数：
                  • true：表示处于捕获阶段
                  • false/省略：表示处于冒泡阶段
                    • 执行过程：小到大：元素~document
                    • 默认：false
                    • 特殊事件没有冒泡阶段：
            • 举例
          • 特点
            • w3c推荐
            • 兼容性问题：IE9以上
              • 解决：attachEvent()
            • 同一个元素，同一个事件可以重复添加多个监听器
            • 按照注册循序依次执行
    • 删除/解绑事件
      • 方法
        • 传统
          • 对象.事件类型=null
        • 新方法
          • • 注意事项
              • 1.如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数
            • 语法解析
          • IE兼容写法
            • 对象.detachEvent('要移除的对象', 函数名称)
            • 兼容写法函数封装
    • 事件流
      • 含义
        • 事件在目标元素和祖先元素间的触发顺序
      • 特点
      • 阶段(按流向来划分)
        • 捕获(Capture)
          • 事件由最顶层逐级向下传播, 直至到达目标元素
          • 事件从最顶层元素 window 一直传递到目标元素的父元素
        • 目标阶段：
          • 事件到达目标元素，如果事件指定不冒泡，那就会在这里中止
        • 冒泡(Bubble)
          • 事件由第一个被触发的元素接收, 然后逐级向上传播
          • 事件从目标元素父元素向上逐级传递直到最顶层元素 window
      • 终止事件传播
        • 事件对象:Event
          • stopPropagation() 方法
            • 语法示例
      • 事件流的执行顺序
        • 谁写在前面就先执行谁
        • onclick在冒泡阶段执行
      • DOM级别
        • DOM0、DOM1、DOM2、DOM3
          • DOM0
            • 将一个函数赋值给一个事件处理属性
            • 特点
              • 一个处理程序无法同时绑定多个处理函数
          • DOM2
            • 特点
              • 允许给一个DOM元素添加多个处理函数(addEventListener)
            • 方法
              • addEventListener 和 removeEventListener
          • DOM3
            • 特点
              • 添加更多的事件
    • 事件对象
      • 存放位置
        • 小括号里面
      • 基本特点
        • 系统自动创建，不需要传递参数。参数可以直接添加到里面
        • 先有事件，才会有对象
        • 是一系列相关事件的数据的集合
        • 可以自己命名
        • 有兼容性问题：IE6.7.8
          • 语法
            • window.event
            • event = event || window.event
          • 输出时：
        • 对象传递给事件监听函数使用。目的是获取事件相关的信息，包括属性，方法等等
      • 常见属性方法
        • 1
          • 返回对象
            • this:返回绑定事件的对象 target：返回触发事件的对象
            • target的兼容性问题：
            • currentTarget
          • 阻止默认行为
            • e.preventDefault()
            • 特点
              • 兼容性问题：IE67 8
                • 解决：e.returnValue
            • return false
              • 特点
                • 没有兼容性问题
                • 后面的代码不执行
            • 阻止右键菜单
              • 语法：事件类型为contextmenu
              • 作用：
            • 阻止鼠标选中:?
              • 禁止鼠标选中(selectstart 开始选中)
          • 阻止冒泡
            • e.stopPropagation() 方法
            • 特点
              • 有兼容性问题
                • 解决
                  • e.cancelBubble = true
                  • 封装函数
                    • if (e &&e.stopPropagation) { e.stopPropagation() ;} else { window.event.cancelBubble=true; }
                    • 举例
            • 事件冒泡的运用
              • 事件委托
                • 原理
                • 作用
                  • 操作一次，响应多个事件
                  • 提升了程序性能
        • 2.
      • 基本类型
        • 鼠标事件对象
          • 属性
            • • clientX clientY
                • 特点
                  • 相对可视区窗口为主
                  • 不受滚动条影响
        • 键盘事件对象
          • 事件
            • 键盘事件： onkeydown：键盘按下 onkeyup：键盘松开 onkeypress：键盘按下并松开
            • 特点
              • 执行顺序：down-press-up
              • 传统的不加on，监听事件注册不加on
              • onkeypress：不识别功能键
          • 对象
            • 属性
              • keyCode：返回按键的ASCII值
          • focus()
            • 表示鼠标获得焦点
• BOM
  • 含义：
    • 浏览器对象模型
  • 基本特点
  • 构成
  • window常见事件
    • 窗口加载事件
      • 含义
      • 语法
        • 1.window.onload = function() { 要执行的代码； }
          • 特点
            • 可以放置在文档的任何地方
            • 只能写一次，多个以最后一个为准
            • window.onload是窗口(页面) 加载事件， 当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等)，就调用的处理函数。
        • 2. window.addEventListener("load", function() {} )
          • 特点
            • 没有限制
            • 所有的内容加载完执行
          • 可以放置在任何地方
        • 3. document.addEventListener('DOMContentLoaded',function() {} )
          • 特点
            • 当DOM加载完成( 不包括样式表， 图片， flash等等。) 才会触发事件
            • 支持I9以上
    • 调整窗口大小事件
      • window.onresize =function() {}
        • 特点
          • 触发时就调用；窗口大小发生像素变化，就会触发这个事件
          • 响应式布局
        • window.innerWidth
          • 当前屏幕的宽度
        • window.innerHeight
          • 当前屏幕的高度
      • window.addEventListener("resize",function() {})
    • 定时器
      • 常用定时器
        • setTimeout()
          • 语法
            • window.setTimeout(调用函数,[延迟的毫秒数] )
            • 特点
              • 时间到了执行函数
              • 执行一次
          • 调用
            • 语法
              • 语法1：
                • setTimeout(function() {},调用时间参数)
                • 参数
                  • 时间
                    • 单位：毫秒
                    • 默认值：0--立即执行
              • 语法2：
                • '函数名()'
                  • 举例
            • 特点
              • 可以里面直接写函数名来调用，外面定义一个函数即可
              • 多个定时器可以一起使用
            • 举例
              • function calk() { console.log('时间到啦'); } setTimeout(calk, 3000)//调用
          • 清除定时器
            • 语法
              • window.clearTimeout(定时器名称)
        • setInterval()
          • 语法
            • window.setInterval(回调函数,[间隔的毫秒数])
            • 1.window可以省略。
            • 2.这个调用函数可以直接写函数，或者写函数名或者采取字符串'函数名0'三种形式
            • 03.3.间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
          • 特点
            • setInterval) 方法重复调用个函数，每隔这个时间，就去调用一次回调函数
            • 04.4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
          • 清除定时器
            • 语法
      • 扩展
        • this指向
          • 一般情况下this的最终向的是那个调用它的对象
          • 全局作用域或者普通函数中this指向全局对象window
          • 方法调用中谁调用this指向谁
          • 构造函数中this指向构造函数的实例
          • 定时器的this指向window
        • JS执行机制
          • 单线程
            • JavaScript语言的一大特点就是单线程， 也就是说， 同个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致—-JavaScript是为处理页面中用户的交互， 以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作， 不能同时进行。应该先进行添加，之后再删除。 单线程就意味着，所有任务需要排队，前一个任务结束才会执行后一个任务。这样所导致的问题是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
          • 同步和异步
            • 同步
              • 含义：按照程序排列顺序执行任务
              • 特点
                • 一次只能做一件事，依次进行
            • 异步
              • 含义
                • 同一个时间做多个事件
              • 特点
                • 任务放到任务队列中
              • 常见异步任务
          • 执行顺序
  • window对象
    • 概述
      • 含义
        • 表示浏览器中打开的窗口
      • 特点
        • 如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象
      • Window 对象属性
      • Window 对象方法
    • 分类
      • location对象
        • 作用
          • 用于获取或设置窗体的URL；解析URL
        • 返回值：对象
        • URL
          • 含义
            • 统一资源定位符；每个页面都有，唯一性；信息指定文件地址/浏览器的处理方式
          • 语法格式
            • protocol://host[:port]/path/[?query]#fragment
            • http://www.itcast.cn/index.html?name=andy&age=18#link
          • 组成
            • • 设置url
          • 属性
        • location方法
          • • location.assign('地址')
              • 特点
                • 具有后退功能
      • navigator对象
        • 作用
        • 属性
      • history对象
        • 作用
          • 浏览器历史记录进行交互
        • 语法
          • history.属性
        • 方法