前端学习笔记——WebAPI

这段时间开始了第一次实习和毕业论文的开始，身边的人都陆续开始查重修改了，我也要加紧时间了，故而笔记的更新只能蹭着周末才开始。话不多说，开始这场Java Script的学习

API的概念

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

Web API

• 浏览器提供了一套操作浏览器功能和页面元素的API(BOM/DOM)
• 这里的Web API特指浏览器提供的API(一组方法)

JavaScript的组成

ECMAScript-JavaScript的核心

• 定义了javascript的语法规范
• javascript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关。

DOM-文档对象模型

• document object model,一套操作页面元素的API
• DOM可以把HTML文档看作是一棵树，通过DOM提供的API可以对树上的节点进行操作。

DOM的概念

• 文档对象模型（Document object model），是W3C组织推荐的处理可扩展标记语言的标准编程接口，它是一种与平台和语言无关的应用程序接口（API），它可以动态的访问程序和脚本，更新其内容，结构和www文档的风格。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中，整个文档都表示在存储器中。

DOM树

• DOM又被称为文档树模型
• 文档：一个网页可以称之为一个文档
• 节点：网页中所有内容都是节点（标签，属性，文本，注释等）
• 元素：网页中的标签
• 属性：标签的属性
  

DOM获取页面元素

当我们想要操作页面上的某部分（显示/隐藏，动画），需要先获取到该部分对应的元素，才能进行后续操作。

1.根据id获取元素

方法：调用document对象的getElementById 方法。
参数：字符串类型的id的属性值。
返回值：对应id名的元素对象。

tips：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。
	  代码执行次序：如果js在html结构之前，会导致结构未加载，不能获取对应的id的元素。

2.根据标签名获取元素
方法：调用document对象的getElementsByTagName方法。
参数：字符串类型的标签名。
返回值：同名元素对象组成的数组。
tips:操作数据时需要根据数组的方法进行。
getElementsByTagName方法内部获取的元素是动态增加的。

3.元素对象内部获取标签元素

• 获取的元素对象内部，本身也可以调用根据标签获取元素的方法，例如div对象可以调用getElementsByTagName 方法。

• . 目的：缩小选择元素的范围，类似css中的后代选择器.

4 根据name获取元素
方法：调用document对象的getElementsByTagName方法。
参数：字符串类型的name属性值。
返回值：name属性值相同的元素对象组成的数组。
tips：不建议使用-在IE/Opera中有兼容问题，会选中id属性值相同的元素。

5 根据类名获取元素
方法：调用document对象的getElementsByClassName方法。
参数：字符串类型的class属性值。
返回值：class属性值相同的元素对象组成的数组。
tips：不支持IE8及以下浏览器

6 根据选择器获取元素
方法1：调用document对象的querySelector方法，通过css中的选择器去选取第一个符合条件的标签元素。
方法2：调用document对象的querySelectorAll方法，通过css中的选择器去选取所有符合条件的标签元素。
参数：字符串类型的class属性值。
返回值：class属性值相同的元素对象组成的数组。
tips：不支持IE8及以下浏览器

记住常用的两种没有兼容问题的

• getElementById()
• getElementsByTagName

DOM事件的基本应用

事件

• 事件：在什么时候做什么事
• 执行机制：触发响应机制
• 绑定事件（注册事件）三要素：
  1.事件源：给谁绑定事件
  2.事件类型：绑定什么类型的事件click单击
  3.事件函数：事件发生后执行什么内容，写在函数内部。

事件监听

• JavaScript解析器会给有绑定事件的元素添加一个监听，解析器会一直检测到这个元素，只要触发对应的绑定事件，会立刻执行事件函数。
  • 方法一：绑定HTML元素属性
  • 方法二绑定DOM对象属性

常用的鼠标事件类型

• onclick：左键单击触发
• ondbclick：左键双击触发
• onmousedown：鼠标键按下触发
• onmouseup：鼠标键放开触发
• onmousemover：鼠标在元素上移动触发
• onmouseover：鼠标移上元素触发
• onmouseout：鼠标移出元素边界触发

案例：点击按钮弹出提示框

<input type="button" id="btn" value="点击">
<script>
//获取元素
var btn=document.getElementById("btn");
//添加点击事件
btn.onclick=function(){
	alert("测试");
};
</script>

DOM元素属性操作

非表单元素的属性

例如：href,title,id,src等。
调用方式：元素对象打点调用属性名，例如obj.href。
tips：部分属性名跟关键字和保留字冲突，要更换写法。
class->className
for->htmlFor
rowspan->rowSpan
属性赋值：给元素属性赋值，等号右侧的赋值都是字符串格式。

获取标签内部内容的属性

• innerHTML:在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等。
• innerText属性：在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的内容会去掉换行和缩进等空白。

更改标签内容

• innerHTML设置属性值，有标签的字符串，会按照HTML语法中的标签加载。
• innerText设置属性值，有标签的字符串，会按照普通的字符加载。
• 前者在设置内部标签结构时使用，后者在设置纯字符串时使用。

表单元素属性

• value用于大部分表单元素的内容获取（option除外）
• type可以获取input标签的类型（输入框或复选框等）
• disabled禁用属性
• checked复选框选中属性
• selected下拉菜单选中属性
• tips：在DOM中元素对象的属性值只有一个时，会被转成布尔值显示。（txt.disabled=true）；

自定义属性操作

• getAttribute(name)获取标签行内属性
• setAttribute(name，value)设置标签行内属性
• removeAttribute(name)移除标签行内属性
• 与element.属性的区别：上述三个方法用于获取任意的行内属性，包括自定义的属性。

style样式属性操作

 <input type="button" value="按钮" id="btn">
    <div id="box" style="width: 100px" class="bg">文字</div>
    <script>
        // 获取元素        
        var btn = my$("btn");
        var box = my$("box");
        // 1.更改类名的方式去更改样式
        // 2.根据对象的 style 属性去操作样式
        console.log(btn.style);
        console.log(box.style);
        console.log(box.style.width);
        console.log(box.style.backgroundColor);
        box.style.width = "200px";
    </script>

使用 style 属性方式设置的样式显示在标签行内。
• element.style 属性的值，是所有行内样式组成的一个样式对象。
• 样式对象可以继续点语法调用或更改 css 的行内样式属性，例如 width、height 等属性。
• 注意1：类似 background-color 这种复合属性的单一属性写法，是由多个单词组成的，要
修改为驼峰命名方式书写 backgroundColor。
• 注意2：通过样式属性设置宽高、位置的属性类型是字符串，需要加上 px 等单位。

className类名属性操作

• 修改元素的 className 属性相当于直接修改标签的类名。
• 如果需要修改多条 css 样式，可以提前将修改后的样式设置到一个类选择器中，后续通过修改类名的方式，批量修改 css 样式。