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 · 260 阅读 · 0 评论 -
BOM-三大系列篇
1. 元素偏移量offset系列1.1 offset概述offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等1.2 offset 系列常用属性获取元素距定位父元素的偏移位置,返回不带单位的值(没有定位父元素,以body为准)a. 水平方向:element.offsetLeftb. 垂直方向:element.offsetTop获取元素大小(边框盒),返回值不带单位a. 宽度:element.offsetWidthb. 高度:ele原创 2020-11-14 21:20:49 · 438 阅读 · 0 评论 -
BOM-对象篇
1. window对象常见的事件窗口(页面)加载事件:window.onload// 1. 当文档内容(图像、脚本文件、CSS文件)完全加载完成会触发该事件,然后调用处理函数window.onload = function () {}// 或者window.addEventListener('load', function () {})DOM加载事件:document.DOMContentLoadeddocument.DOMContentLoaded = function() {}原创 2020-11-14 15:13:52 · 111 阅读 · 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 什么是 BOMBOM(Browser Object Model) 即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心的对象是 windowBOM 由一些列相关的对象构成,并且每个对象都提供了很多方法与属性BOM 缺乏标准,JS语法的标准化组织是ECMA, DOM的标准化组织是W3C, BOM最初是Netscape浏览器标准的一部分1.2 BOM 的构成BOM 比 DOM 更大,它包含 DOMwindow 对象是浏览器顶级对象,它具有双重原创 2020-11-13 20:35:48 · 367 阅读 · 0 评论 -
DOM-事件篇
1. 事件概述JS使我们有能力创建动态页面,而事件是可以被JS侦测到的行为简单理解:触发—响应机制网页中的每个元素都可以产生某些可以触发JS的事件,例如,我们可以在用户点击按钮时产生一个事件,然后去执行某些操作2. 事件的组成事件是有三部分组成(事件三要素):事件源、事件类型、事件处理程序a. 事件源:触发事件的对象b. 事件类型:如何触发,什么事件c. 事件处理程序:通过一个函数赋值的方式完成3. 执行事件的步骤获取事件源注册事件(绑定事件)添加事件处理程序(采用函数赋值原创 2020-11-13 20:34:29 · 191 阅读 · 0 评论 -
DOM-操作节点篇
1. 为什么学习节点操作获取元素通常使用两种方式:1. 利用DOM提供的方法获取元素 (`缺点:繁琐,逻辑性不强`)2. 利用节点层级(父子、兄弟节点)关系获取元素(`逻辑性强,但兼容性差`)以上两种方式都可以获取元素节点,我们后面都会使用,但是节点操作更简单2. 节点概述节点:页面中所有的内容都是节点(标签、属性、文本、空格、换行、注释等),在DOM中节点使用node来表示节点分为三大类:标签、属性、文本(文本、空格、换行、注释 都属于文本节点)HTML的DOM树中的所有节原创 2020-11-13 20:02:39 · 176 阅读 · 0 评论 -
DOM-操作元素篇
1. 获取元素(标签)根据ID获取:document.getElementById('id')document.getElementById('id')// 返回标签的 dom 对象// console.dir(元素对象) 打印我们返回的元素对象,更好的查看里面的属性和方法根据标签名获取:document.getElementsByTagName('标签名')document.getElementsByTagName('标签名')// 返回带有指定标签名的对象的集合(伪数组)//原创 2020-11-13 19:24:16 · 189 阅读 · 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 · 273 阅读 · 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和BOMWeb APIs是我们JS所独有的部分我们主要学习页面交互功能需要使用JS基础的课程内容做基础2. API和Web原创 2020-07-08 18:54:40 · 522 阅读 · 0 评论