API 应用程序编程接口,是一些预定义的函数,开发者无需知道其内部的具体实现代码,只需要知道其功能是什么直接调用即可。
Web API 是浏览器提供的一套操作浏览器功能和页面元素的API (DOM和BOM),主要用于做页面交互效果。
DOM 文档对象模型
是w3c组织推荐的处理可扩展标记语言的标准编程接口,通过这些DOM接口可以改变网页内容、结构和样式。
DOM树
文档 document 一个网页就是一个文档
元素 element 页面中所有标签都是元素
节点 node 网页中所有内容都是节点(标签、属性、文本、注释等)
获取页面元素
getElementById() // 通过id值获取,返回元素对象
getElementsByTagName() // 通过标签名获取,返回元素对象的集合,以伪数组的形式存储
getElementsByClassName() // h5新增,通过类名获取,返回元素对象集合
querySelector(‘选择器‘) // h5新增,通过选择器获取,返回指定选择器的第一个元素对象
querySelectorAll(‘选择器‘) // h5新增,通过选择器获取,返回指定选择器的所有元素集合
获取特殊元素
document.body // 获取body元素
document.documentElement // 获取html元素
事件基础
事件:触发 - 响应 的一种机制,是一种可以被JS侦测到的行为。
事件三要素:事件源、事件类型、事件处理程序。
执行事件的三步骤:获取事件源、注册事件(绑定事件)、添加事件处理程序(采用函数赋值的形式)
常见的鼠标事件:onclick、onmouseover、onmouseout、onfocus、onblur、onmousemove、onmouseup、onmousedown
改变元素内容
element.innerText // 不识别html标签,去除换行和空格
element.innerHTML // 识别html标签,保留换行和空格
修改元素属性
element.属性名