Web API 一

API概念

---

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。

Web API

---

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

DoM

文档对象模型，是W3c组织推荐的处理可扩展标记语言的标准编程接口 W3C已经定义了一系列的DOM接口，通过这些可以改变网页的内容、结构和样式。

DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结构可以加入到当前页面。

获取元素

---

1.根据ID获取

document.getElementById(id)

2.根据标签名获取元素

document.getElementsByTagName('标签名')

3.h5新增方式

通过classname获取
document.getElementsByClassName('类名')
通过选择器获取
document.querySelector()   //  .类名   #id名   标签
通过选择器获取所有元素
document.querySelectorAll()

事件

---

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发— 响应机制。

事件三要素

---

事件源：触发事件的元素 事件类型：做了什么事件 事件处理程序：事件触发后要执行的代码，事件处理函数

执行事件的步骤

---

获取事件源 注册事件 添加事件处理程序

常见的鼠标事件

---

onclick   鼠标左键触发
onmouseover   鼠标经过触发
onmouseout   鼠标离开触发
onfocus   获得鼠标焦点触发
onblur   失去鼠标焦点触发
onmousemove  鼠标移动触发
onmouseup  鼠标弹起触发
onmousedown  鼠标按下触发

操作元素

---

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等

element.innerText    //  会去除html标签，同时空格和换行也会去掉
element.innerHTML  //  包括html标签，同时保留空格和换行

常用元素的属性操作

---

获取属性的值：
元素对象.属性名
设置属性的值：
元素对象.属性名

样式属性操作

---

可以通过js修改元素的大小、颜色、位置等样式
element.style    行内样式操作
element.className   类名样式操作

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

1. 所有元素全部清除样式（干掉其他人）
2. 给当前元素设置样式 （留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

自定义属性操作

获取属性值
element.属性      获取属性值
element.getAttribute('属性')
设置属性值
element.属性 = ‘值’
element.setAttribute('属性','值')
移除属性
element.removeAttibute('属性')

设置自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

节点操作

---

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

​	HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

节点层级

---

node.parentNode    父级节点     //返回该节点的父节点，
parentNode.childNodes    所有子节点   //返回一个集合
parentNode.firstChild   第一个子节点
parentNode.lastChild   最后一个子节点
parentNode.nextSibling   兄弟节点

节点增删改查

document.creteElement    创建节点
node.appendChild(child)     添加节点
node.removeChild()    删除节点
node.cloneNode()    克隆节点     //  括号里边为true为深拷贝    没有则默认为浅拷贝

创建元素的三种方式

document.write()   //直接将内容写入页面的内容流
element.innerHTML   //是将内容写入某个DOM节点，不会导致页面全部重绘
document.createElement   // 创建多个元素效率稍低一点点，但是结构更清晰