这是我参与「第四届青训营 」笔记创作活动的第3天
API与Web API
API是用于实现某种功能的接口,Web API是针对于浏览器提供的接口,实现浏览器交互效果。
DOM
文档对象模型(Document Object Model)可以改变网页内容、结构和样式。
获取元素
·getElementById() 获取带有 ID 的元素对象
·getElementsByTagName() 返回带有指定标签名的对象的集合
·getElementsByClassName() 根据类名返回元素对象集合
·querySelector() 根据指定选择器返回第一个元素对象
·doucumnet.body 返回body元素对象
·document.documentElement 返回html元素对象
操作元素
改变内容
·element.innerText 从起始位置到终止位置的内容, 但它去除 html 标签, 同时空格和换行也会去掉
·element.innerHTML 起始位置到终止位置的全部内容,包括 html 标签,同时保留空格和换行
·element.style 行内样式操作
·element.className 类名样式操作
节点操作
·document.createElement('tagName')
·node.appendChild(child)
·node.insertBefore(child, 指定元素)
·node.removeChild(child)
·node.cloneNode()
绑定事件
BOM
BOM(Browser Object Model),浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
存储
·存储数据:sessionStorage.setItem(key, value) localStorage.setItem(key, value)
·获取数据:sessionStorage.getItem(key) localStorage.getItem(key)
·删除数据:sessionStorage.removeItem(key) localStorage.removeItem(key)
·删除所有数据:sessionStorage.clear() localStorage.clear()
网页特效
·offset是偏移量, 使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意: 返回的数值都不带单位
·client是客户端,使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
·scroll是滚动,使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。