前端JS学习笔记——Web API简介

JS的组成

Web APIs是W3C的标准，属于JS独有的部分，这部分内容主要学习页面的交互

那么Web API和APi又有什么不同呢？

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

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

Web API很多都是方法（函数），一般都有输入和输出（函数的传参和返回值）。

DOM简介

什么是DOM

DOM全称文档对象模型（Document Object Model），是W3C推荐的处理可扩展标记语言（HTML、XML）的标准编程接口，通过这些DOM接口可以改变网页的结构、内容和样式。

DOM树

• 文档：一个页面就是一个文档，DOM中用document表示
• 元素：页面中所有的标签都是元素，用element表示
• 节点：网页中所有的内容都是节点（标签、属性、文本、注释），用node表示

DOM把以上内容都看作对象，所以称为文档对象模型。

DOM重点

关于do操作，我们主要针对于元素的操作。主要有创健、增、删、改、查、属性操作、事件操作。

1.创建

• document.write 
• innerHTML
• createElement

2.增

• appendChild
• insertBefore

3.删

• removeChild

4.改

        主要修改dom的元素属性，dom元素的内容、属性表单的值等

• 修改元素属性：src、href、title等
• 修改普通元素内容：innerHTML、innerText
• 修改表单元素：value、type、disabled等
• 修改元素样式：style、.className

5.查

        主要获取查询dom的元素

• DOM提供的API方法：getElementByld、getElementsByTagName古老用法不太推荐
• H5提供的新方法：querySelector、querySelectorAll  提倡
• 利用节点操作获取元素：父（parentNode）、子children）、兄（previousElementSibling、
  nextElementSibling）提倡

6.属性操作

        主要针对于自定义属性。

• setAttribute：设置dom的属性值
• getAttribute：得到dom的属性值
• removeAttribute移除属性

7.事件操作

        给元素注册事件，采取事件源事件类型=事件处理程序

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

DOM总结

• 文档对象模型
• DOM就是把「文档」当做一个「对象」来看待
• DOM的顶级对象是document
• DOM主要学习的是操作页面元素
• DOM是W3C标准规范

BOM简介

什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对像，其核心对象是window。

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM是浏览器厂商在各自浏览器上定义的，兼容性较差。

BOM的构成

BOM比DOM更大，它包含DOM.

 window对象是浏览器的顶级对象，它具有双重角色。

1. 它是S访问浏览器窗口的一个接口。
2. 它是一个全局对像。定义在全局作用域中的变量、函数都会变成window对像的属性和方法。在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等。

BOM总结

• 浏览器对象模型
• 把「浏览器」当做一个「对象」来看待
• BOM的顶级对象是window
• BOM学习的是浏览器窗口交互的一些对象
• BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

个人学习笔记，如有差误欢迎指正