本文已参与「新人创作礼」活动,一起开启掘金创作之路。
Web APIs
API 和 Web API
APl ( Application Programming Interface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解︰API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM)。现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。
比如我们想要浏览器弹出一个警示框，直接使用alert(‘弹出’)
1.DOM
文档对象模型(Document Object Model，简称DOM ）)，是W3C组织推荐的处理可扩展标记语言(HTM或者XML )的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
1.1 DOM树
- 文档:一个页面就是一个文档，DOM中使用document
- 表示元素:页面中的所有标签都是元素，DOM中使用element表示
- 节点∶网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容都看作是对象
2.获取页面元素
2.1 根据ID获取
使用getElementByld()方法可以获取带有ID的元素对象。
-
document.getElementById( id );
- 返回元素对象
- 没有就返回null
2.2根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
-
getElementsByTagName( 标签名 )；
- 得到的是集合，以伪数组的形式储存
- 可以采取遍历的方式访问里面的元素对象
- 无标签返回空的伪数组
-
element.getElementsByTagName ( '标签名');
- 获取某个元素(父元素)内部所有指定标签名的子元素.
- 注意∶父元素必须是单个对象(必须指明是哪一个元素对象).
- 获取的时候不包括父元素自己。
2.3 HTMl5 新增方法获取
-
getElementsByClassName( 类名 )；
-
querySelector( 选择器 )；返回选择器指定的第一个元素对象
- 类选择器加 . id选择器加 # 标签不需
-
querySelectorAll( 选择器 );返回选择器指定的所有对象
2.4 获取特殊标签
- 获取body标签
document.body;
- 获取HTMl元素
document.documentElement；
