JS-API
web-api是浏览器提供的一套操作浏览器功能和页面元素的API(DOM和BOM)
何北木
这个作者很懒,什么都没留下…
展开
-
BOM-本地存储
1. 本地存储概述 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地 存储大量的数据,HTML5规范提出了相关的解决方案。 2. 本地存储特性 数据存储在用户的浏览器中 设置、读取非常方便,甚至页面刷新不会丢失数据 容量较大,sessionStorage约5M、localStorage约20M 只能存储字符串,可以将对象JSON.stringify()编码后存储 3. window.sessionStorage方式存储 它的生命周期为关闭原创 2020-11-14 21:22:06 · 254 阅读 · 0 评论 -
BOM-三大系列篇
1. 元素偏移量offset系列 1.1 offset概述 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等 1.2 offset 系列常用属性 获取元素距定位父元素的偏移位置,返回不带单位的值(没有定位父元素,以body为准) a. 水平方向:element.offsetLeft b. 垂直方向:element.offsetTop 获取元素大小(边框盒),返回值不带单位 a. 宽度:element.offsetWidth b. 高度:ele原创 2020-11-14 21:20:49 · 436 阅读 · 0 评论 -
BOM-对象篇
1. window对象常见的事件 窗口(页面)加载事件:window.onload // 1. 当文档内容(图像、脚本文件、CSS文件)完全加载完成会触发该事件,然后调用处理函数 window.onload = function () {} // 或者 window.addEventListener('load', function () {}) DOM加载事件:document.DOMContentLoaded document.DOMContentLoaded = function() {}原创 2020-11-14 15:13:52 · 107 阅读 · 0 评论 -
JS-执行机制篇
1. JS 是单线程 JS语言的一大特点就是单线程,也就是说同一时间只能做一件事情。 这是因为JS这门脚本语言诞生的使命所致(JS是为处理页面中用户的交互,以及操作DOM诞生的)。 比如对某个DOM元素进行添加删除操作,不能同时进行,应该先添加后删除 2. JS 单线程导致的问题 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。 这样所导致的问题是:如果JS执行时间过长就会造成页面渲染不连贯,导致页面渲染加载阻塞的感觉 比如定时器的延迟时间,就需要等待 3. 同步和异步 为了原创 2020-11-14 14:36:35 · 200 阅读 · 0 评论 -
BOM-概述篇
1. BOM 概述 1.1 什么是 BOM BOM(Browser Object Model) 即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心的对象是 window BOM 由一些列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM 缺乏标准,JS语法的标准化组织是ECMA, DOM的标准化组织是W3C, BOM最初是Netscape浏览器标准的一部分 1.2 BOM 的构成 BOM 比 DOM 更大,它包含 DOM window 对象是浏览器顶级对象,它具有双重原创 2020-11-13 20:35:48 · 360 阅读 · 0 评论 -
DOM-事件篇
1. 事件概述 JS使我们有能力创建动态页面,而事件是可以被JS侦测到的行为 简单理解:触发—响应机制 网页中的每个元素都可以产生某些可以触发JS的事件,例如,我们可以在用户点击按钮时产生一个事件,然后去执行某些操作 2. 事件的组成 事件是有三部分组成(事件三要素):事件源、事件类型、事件处理程序 a. 事件源:触发事件的对象 b. 事件类型:如何触发,什么事件 c. 事件处理程序:通过一个函数赋值的方式完成 3. 执行事件的步骤 获取事件源 注册事件(绑定事件) 添加事件处理程序(采用函数赋值原创 2020-11-13 20:34:29 · 185 阅读 · 0 评论 -
DOM-操作节点篇
1. 为什么学习节点操作 获取元素通常使用两种方式: 1. 利用DOM提供的方法获取元素 (`缺点:繁琐,逻辑性不强`) 2. 利用节点层级(父子、兄弟节点)关系获取元素(`逻辑性强,但兼容性差`) 以上两种方式都可以获取元素节点,我们后面都会使用,但是节点操作更简单 2. 节点概述 节点:页面中所有的内容都是节点(标签、属性、文本、空格、换行、注释等),在DOM中节点使用node来表示 节点分为三大类:标签、属性、文本(文本、空格、换行、注释 都属于文本节点) HTML的DOM树中的所有节原创 2020-11-13 20:02:39 · 173 阅读 · 0 评论 -
DOM-操作元素篇
1. 获取元素(标签) 根据ID获取:document.getElementById('id') document.getElementById('id') // 返回标签的 dom 对象 // console.dir(元素对象) 打印我们返回的元素对象,更好的查看里面的属性和方法 根据标签名获取:document.getElementsByTagName('标签名') document.getElementsByTagName('标签名') // 返回带有指定标签名的对象的集合(伪数组) //原创 2020-11-13 19:24:16 · 187 阅读 · 0 评论 -
DOM-概述篇
1. DOM 简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML、XML)的 标准编程接口 W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式 1.1 DOM树: 文档:一个页面就是一个文档,DOM中使用 document 表示 元素:页面中所有标签都是元素,DOM中使用 element 表示 节点:网页中的所有内容都是节点(标签、属性、文本、注释),DOM中使用node表示 DOM把以上内容都原创 2020-07-11 15:50:27 · 268 阅读 · 0 评论 -
JS-Web API简介
1. Web APIs和JS基础关联性 1.1 JS的组成 1.2 JS基础阶段以及Web APIs阶段 1.21 JS基础阶段 我们学习的是 ECMAScript 标准规定的基本语法 只学习基本语法,做不了常用的网页交互效果 目的是为了JS后面的课程打基础、做铺垫 1.22 Web APIs阶段 Web APIs是W3C组织的标准 Web APIs主要学习的是DOM和BOM Web APIs是我们JS所独有的部分 我们主要学习页面交互功能 需要使用JS基础的课程内容做基础 2. API和Web原创 2020-07-08 18:54:40 · 518 阅读 · 0 评论