编程基础10：Web API编程-1

这是一篇关于编程基础10：Web API编程-1的思维导图，DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

Web API编程-1

• 1：Web API介绍
  • API介绍
    • 是一些预先定义的函数
    • 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力
    • 无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可
  • Web API的概念
    • Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API
    • 针对浏览器做交互效果
• 2：DOM
  • 什么是DOM
    • 文档对象模型（Document Object Model，简称DOM）
    • 是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口
    • W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
    • DOM树
      • DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
      • 文档：一个页面就是一个文档，DOM中使用document表示
      • 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
      • 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示
      • DOM把以上内容都看做是对象
  • 获取元素
    • 根据ID获取
      • 语法：document.getElementById(id)
      • 作用：根据ID获取元素对象
      • 参数：id值，区分大小写的字符串
      • 返回值：元素对象 或 null
    • 根据标签名获取元素
      • 语法：document.getElementsByTagName('标签名') 或者element.getElementsByTagName('标签名')
      • 作用：根据标签名获取元素对象
      • 参数：标签名
      • 返回值：元素对象集合（伪数组，数组元素是元素对象）
      • 注意
        • 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
        • 得到元素对象是动态的
    • 根据类名获取元素
      • 语法：document.getElementsByClassName(类名);
      • 作用：根据标类名获取元素对象
      • 参数：class 类名
      • 返回值：元素对象集合（伪数组，数组元素是元素对象）
    • 指定选择器获取元素 querySelector
      • 语法：document.querySelector(selectors);
      • 返回文档中与指定选择器或选择器组匹配的第一个 html元素Element。 如果找不到匹配项，则返回null。
      • 参数：包含一个或多个要匹配的选择器字符串， 该字符串必须是有效的CSS选择器字符串；
      • 返回文档中与指定的一组CSS选择器匹配的第一个元素的 html元素Element对象。
    • 指定选择器获取元素 querySelectorAll
      • 语法：document.querySelectorAll(selectors);
      • 返回与指定的选择器组匹配的文档中的元素列表
      • 返回的对象是 NodeList 。
      • 参数：包含一个或多个匹配的选择器。这个字符串必须是一个合法的CSS选择器字符串
  • 获取特殊元素（body，html）
    • doucumnet.body 返回body元素对象
    • document.documentE1 ement 返回htm1元素对象
• 3：事件基础
  • 事件概述
    • 触发--- 响应机制
    • 事件三要素
      • 事件源（谁）：触发事件的元素
      • 事件类型（什么事件）： 例如 click 点击事件
      • 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
    • 执行事件的步骤
      • 1.获取事件源
      • 2.注册事件（绑定事件）
      • 3.添加事件处理程序（采取函数赋值形式）
  • 常见的鼠标事件
    • onclick 鼠标点击左键触发
    • onmouseover 鼠标经过触发
    • onmouseout 鼠标离开触发
    • onfocus 获得鼠标焦点触发
    • onblur 失去鼠标焦点发
    • onmousemove 鼠标移动触发
    • onmouseup 鼠标弹起触发
    • onmousedown 鼠标按下触发
• 4：操作元素
  • 改变元素内容（获取或设置）
    • element. innerHTMl 起始位置到终止位置的全部内容，包括htm标签，同时保留空格和换行
    • element.innerText 从起始位置到终止位置的内容，但它去除htm标签，同时空格和换行也会去掉
    • innerText和innerHTML的区别
      • 获取内容时的区别：​ innerText会去除空格和换行，而innerHTML会保留空格和换行
      • 设置内容时的区别：innerText不会识别html，而innerHTML会识别
  • 获取属性的值
    • 元素对象.属性名
  • 设置属性的值
    • 元素对象.属性名 = 值
  • 常用元素的属性操作
    • innerText、 innerHTMl 改变元素内容
    • id、alt、tit1e
    • src、href
  • 表单元素的属性操作
    • type、 value、 checked、selected、 disabled
    • disabled、checked、selected，元素对象的这些属性的值是布尔型。
  • 样式属性操作
    • element.style 行内样式操作
      • js里面的样式采取驼峰命名法比如 fontSze、 backgroundColor
      • js修改 style样式操作，产生的是行内样式，css权重比较高
    • element.className 类名样式操作
      • class 因为是个保留字，因此使用className来操作元素类名属性
      • className 会直接更改元素的类名，会盖原先的类名。
  • classList 属性(详见：第3阶段-第3章-第17小结-05)
    • classList属性是HTML5新增的一个属性，操作元素的类名
    • 添加类： element.classList.add（’类名’）
    • 移除类：element.classList.remove（’类名’）
    • 切换类：element.classList.toggle（’类名’）
• 5：自定义属性操作
  • 获取属性值
    • element.属性 获取属性值
    • element.getAttribute('属性') 获取属性值
    • 区别
      • element.getAttribute('属性) 主要获得自定义的属性（标准）我们程序员自定义的属性
      • elemen.属性 获取内置属性值（元素本身自带的属性）
  • 设置属性值
    • element.属性=值 设置内置属性值。
    • element.setAttribute("属性'，'值')；
    • 区别
      • element.属性 设置内置属性值
      • element.setAttribute(属性) 主要设置自定义的属性（标准）
  • 移出属性
    • element.removeAttribute("属性');
  • H5自定义属性
    • 设置
      • 有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
      • H5规定自定义属性 data- 开头做为属性名并且赋值。
      • 比如< diy data-index="1"></div> 或者使用JS设置 element.setAttribute('data-index',2)
    • 获取
      • 兼容性获取 element. getAttribute('data- index'）
      • H5新增 element.dataset.index 或 element.dataset['index'] IE11才开始支持
• 6：节点操作
  • 节点概述
    • 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示
    • DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
    • 可以把节点划分为不同的层级关系，常见的是 父子兄层级关系
  • 父级节点 parentNode
    • 可返回某节点的父节点，注意是最近的一个父节点
    • 如果指定的节点没有父节点则返回null
  • 子节点
    • parentNode.childNodes(标准)
      • 返回包含指定节点的子节点的集合，该集合为即时更新的集合
      • 返回值里面包含了所有的子节点，包括元素节点，文本节点等。
      • 如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用 childNodes
    • parentNode.children (非标准)
      • 只读属性，返回所有的子元素节点，其余节点不返回
      • children是一个非标准，但是得到了各个浏览器的支持 ，可以放心使用
    • firstChild：返回第一个子节点，找不到则返回nul；包含所有的节点。
    • lastChild：返回最后一个子节点，找不到则返回nul；包含所有的节点。
    • firstElementChild : 返回第一个子元素节点，找不到则返回null.
    • lastElementChild : 返回最后一个子元素节点，找不到则返回null
  • 兄弟节点
    • nextSibling 返回当前元素的下个兄弟节点，找不到则返回null
    • previousSibling 返回当前元素上一个兄弟节点，找不到则返回null
  • 创建节点
    • document.createElement(tagName'')
    • 创建由 tagName指定的HTML元素
    • 因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
  • 添加节点
    • node.appendChild()
      • 将—个节点添加到指定父节点的子节点列表末尾
      • 类似 css里面的after伪元素
    • node. insertBefore()
      • 将一个节点添加到父节点的指定子节点前面
      • 类似于css里面的 before 伪元素
  • 删除节点
    • node.removeChild()： 从 node节点中删除一个子节点，返回删除的节点。
  • 复制（克隆）节点
    • node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点