Web API详解

1. Web APIs
   Web APIs是w3c组织的标准
   Web APIs中主要学习DOM和BOM
   Web APIs是JS独有的
   1.1 API和Web APIs
   API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能
   Web APIs是浏览器提供的一套操作浏览器功能和页面元素的API
   MDN详细API：https://developer.mozilla.org/zh-CN/docs/Web/API
   1.2 DOM
   DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过这些DOM接口可以改变网页的内容，结构和样式
   DOM树
   文档：一个页面就是一个文档，DOM中用document表示
   元素：页面中的所有标签都是元素，DOM中用element表示
   节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中用node表示
   1.3 获取元素
   DOM在我们实际开发中主要用来操作元素，通过以下方式可以获取元素
   根据ID获取：使用getElementById()方法
   根据标签名获取：使用getElementByTagName()方法
   通过h5新增方法获取：getElementByClassName(‘类名’)
   querySelector(‘选择器’)
   querySelectorAll(‘选择器’)
   特殊元素获取: doucument.body 获取body元素
   doucument.doucumentElement 获取html元素
   1.4 事件基础
   事件是可以被JS侦测到的行为
   事件三要素
   事件源：事件被触发的对象
   事件类型：事件如何触发
   事件处理程序：事件通过什么方式完成
   执行事件的步骤
   获取事件源
   注册事件
   添加事件处理程序
   常见的鼠标事件
   onclick 鼠标点击左键触发
   onmouseover 鼠标经过触发
   onmouseout 鼠标离开触发
   onfocus 获得鼠标焦点触发
   onblur 失去鼠标焦点触发
   onmousemove 鼠标移动触发
   onmouseup 鼠标弹起触发
   onmousedown 鼠标按下触发
   1.5 操作元素
   改变元素内容
   element.innerText 从起始位置到终止为止的内容，去除HTML标签，同时去除空格和换行
   element.innerHTML 从起始位置到终止为止的全部内容，包括HTML标签，保留空格和换行
   常用元素的属性操作
   1. innerText,innerHTML
   2. src,href
   3. id,alt,title
   表单元素的属性操作
   利用DOM可以操作如下表单元素的属性：type,value,checked,selected,disabled
   样式属性操作
   element.style 行内样式操作
   element.className 类名样式操作
   自定义属性的操作
   element.属性
   element.getAttribute(‘属性’)
   设置属性值
   element.属性 = ‘值’
   element.getAttribute(‘属性’,‘值’);
   H5自定义属性
   自定义属性的目的是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
   H5规定自定义属性data-开头作为属性名并赋值
   1.6 节点操作
   获取元素通常使用两种方式
   1.利用DOM提供的方法获取元素 逻辑性不强，而且繁琐
   2.利用节点的层次关系 逻辑性强 兼容性较差
   节点的三个基本属性
   nodeType 节点类型
   nodeName 节点名称
   nodeValue节点值
   节点层级
   父节点 parentNode
   子节点 childNodes/chilren/fistChild/lastChild/firstElementChild/lastElementChild
   兄弟节点 nextSibling/previousSibling/nextElementSibling/previousElementSibling
   删除节点
   node.removeChild(child)
   复制节点
   node.cloneNode(true)
   三种动态创建元素
   document.write()
   直接将内容写入页面的内容流，但是文档流执行完毕，会导致页面重绘

   element.innerHTML
   将内容写入某个节点DOM，不会导致页面全部重绘，创建多个元素时效率更高，结构稍复杂

   document.creatElement()
   创建多个元素效率稍低，结构更清晰
   1.7 DOM重点核心
   创建
   1.document.write
   2.innerHTML
   3.creatElement
   增
   1.appendChild
   2.insertBefore
   删
   1.removeChild
   改
   1.修改元素属性：src,herf,title
   2.修改普通元素：innerHTML,innerText
   3.修改表单元素：value,type,disabled
   4.修改元素样式：style,className
   查
   1.DOM提供的API方法：getElementById,getElementByTagName
   2.H5提供的新方法：querySelector,querySelectorAll
   3.利用节点操作获取：parentNode,children,previousElementSibling,nextElementSibling
   属性操作
   1.setAttribute:设置dom属性值
   2.getAttribute:得到dom属性值
   3.removeAttribute:移除属性
   事件操作
   onclick 鼠标点击左键触发
   onmouseover 鼠标经过触发
   onmouseout 鼠标离开触发
   onfocus 获得鼠标焦点触发
   onblur 失去鼠标焦点触发
   onmousemove 鼠标移动触发
   onmouseup 鼠标弹起触发
   onmousedown 鼠标按下触发