15.WebAPI

javascript基础

API的概念

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

• 任何开发语言都有自己的API
• API的特征输入和输出(I/O)
  • var max = Math.max(1, 2, 3);
• API的使用方法(console.log(‘adf’))

Web API的概念

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

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

###javascript的组成

ECMAScript - JavaScript的核心

定义了JavaScript 的语法规范

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

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM经常进行的操作

• 获取元素

• 对元素进行操作(设置其属性或调用其方法)

• 动态创建元素

• 事件(什么时机做相应的操作)

获取页面元素

#####根据Id来获取元素(常用)

var div = document.getElementById('main');
console.log(div);

// 获取到的数据类型 HTMLDivElement，对象都是有类型的
//  div    -->  HTMLDivElement
//  p      -->  HTMLPargagraphElement
//打印对象我们都用 console.dir();

根据标签获取元素(常用)

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i+++) {
  var div = divs[i];
  console.log(div);
} //获取所有的标签 
//注意: 这个方法获取的集合是动态的,意思是当页面上重新添加了相同的元素时,结合的个数会实时增加

根据name获取元素*(有兼容性问题,不推荐使用)

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}
//inputs.length  获取的是inputs变量对应对象的个数

根据选择器获取元素 query 查询 selector 选择器 class 类(PC端有兼容性问题,在移动端就可以使用)

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

总结

掌握
	getElementById()
	getElementsByTagName()
	
	
了解(有浏览器兼容问题)
	getElementsByName()
	getElementsByClassName()
	querySelector()          //根据选择器查找元素,只能获取到一个元素
	querySelectorAll()    //可以获取多个元素或者一个元素
	
	  var content = document.getElementById('content'); 
    var divs  = content.getElementsByTagName('div');  
                 //获取大标签里面的小标签