Web API介绍
API的概念
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
- 任何开发语言都有自己的API
- API的特征输入和输出(I/O)
- API的使用方法(console.log(‘adf’))
Web API的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
DOM的概念
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(html)标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构,DOM(是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中。
- 文档:一个网页可以称为文档
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等)
- 元素:网页中的标签
- 属性:标签的属性
DOM经常进行的操作
- 获取元素
- 对元素进行操作(设置其属性或调用其方法)
- 动态创建元素
- 事件(什么时机做相应的操作)
获取页面元素
为什么要获取页面元素
例如:我们要页面元素隐藏/显示,需要现获取对应的元素,才能进行后续操作
根据id获取元素
var div = document.getElementById("id2");
当id重名的时候,会获取第一个,id有唯一性的
根据标签名获取元素
//标签名获取元素
var div = document.getElementsByTagName("div")[5];
alert(div);
根据name获取元素*
// 通过name来获取
var names = document.getElementsByName('n');
for (var i = 0; i < names.length; i++) {
alert(names[i]);
}
alert(names);
根据类名获取元素*
// 通过类名
var mains = document.getElementsByClassName("main");
alert(mains);
根据选择器获取元素*
// 根据选择器获取元素
var id1 = document.querySelector('#p';
alert(p);
var mains = document.querySelectorAll('.main');
alert(mains);
属性操作
非表单元素的属性
href、title、id、src、className
var link = document.getElementById("link");
console.log(link.href);
-
innerHTML和innerText
-
HTML转义符
" "
' '
& &
< < // less than 小于
> > // greater than 大于
空格
© ©