API(应用程序官方接口)
简单理解:API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。
Web API
是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。
web api很多,所以这阶段成为 web apis
DOM简介
文档对象模型(Document Object Model,简称DOM),处理可扩展标记语言(HTML或者XML)的标准编程接口。
通过DOM接口可以改变网页的内容、结构、样式。
- DOM树
文档:一个页面就是一个文档,DOM中用document表示;
元素:页面中所有的标签都是元素,DOM中用element表示。
节点:页面中所有内容都是节点,DOM中用node表示。
DOM把以上内容都看作是对象。
获取元素
获取页面中元素的方式:
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
根据ID获取
通过getELementById(id);
1、文档页面从上往下加载,所以先得有标签 ,所以script写在标签下面。
2、id参数是大小写敏感的字符串
3、返回的是一个元素对象。
4、书写方式:document.getELementById()
5、console.dir//打印我们返回的元素对象,更好的查看里面的属性和方法。
根据标签名获取
getElementByTagName()
1、返回的是获取过来元素对象的集合,以伪数组的形式存储。
2、想要依此打印里面的元素对象可以采用遍历的方式。
3、得到的元素对象是动态的。
4、如果只有一个li时,返回的还是为数组形式
5、若果页面中没有li,放回的是空的伪数组。
document.getElementByTagName(‘li’);
6、获取某个父元素内部所有指定的标签名的子元素。父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己。
eg: console.log(ol[0].getElementByTagName(‘ol’));
H5新增的方法获取
1、getElementByClassName 根据类名获得某些元素集合。
2、document.querySelector()返回指定选择器的第一个元素。里面的选择器要加符号.box #nav
3、document.querySelectorAll(),返回指定选择器的所有对象集合。
获取特殊元素
1、获取body 元素
document.body;
2、获取html 元素
document.documentElement;
事件基础
简单理解:触发–响应机制。
网页中每个元素都可以产生某些可以触发Javascript的事件。
<