JavaScript总结（1）_js svganimatedlengthlist-CSDN博客

本文链接：https://blog.csdn.net/weixin_42679205/article/details/126769429

JS

浏览器API：

1. `文档对象模型 API（DOM（Document Object Model）API）`

能通过创建、移除和修改 HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。比如当某个页面出现了一个弹窗，或者显示了一些新内容（像上文小 demo 中看到那样），这就是 DOM 在运行。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

API (web 或 XML 页面) = DOM + JS (脚本语言)

在 API 参考文档中的语法实例通常会使用 element(s) 指代节点，使用 nodeList（s）或 element(s)来指代节点数组，使用 attribute(s)来指代属性节

在 DOM 编程时，通常使用的最多的就是 Document 和 window 对象。简单的说， window 对象表示浏览器中的内容，而 document 对象是文档本身的根节点。Element 继承了通用的 Node 接口，将这两个接口结合后就提供了许多方法和属性可以供单个元素使用。在处理这些元素所对应的不同类型的数据时，这些元素可能会有专用的接口

数据类型	描述
document	当一个成员返回 `document` 对象（例如，元素的 `ownerDocument` 属性返回它所属于 `document` ) ，这个对象就是 root `document` 对象本身。 DOM `document` Reference
element	`element` 是指由 DOM API 中成员返回的类型为 `element` 的一个元素或节点。例如， document.createElement() 方法会返回一个 `node` 的对象引用，也就是说这个方法返回了在 DOM 中创建的 `element`。 `element` 对象实现了 DOM `Element` 接口以及更基本的 `Node` 接口
nodeList	`nodeList` 是一个元素的数组，如从 document.getElementsByTagName() 方法返回的就是这种类型。 `nodeList` 中的条目由通过下标有两种方式进行访问：`list.item(1)`和`list[1]`两种方式是等价的，第一种方式中 `item()` 是 `nodeList` 对象中的单独方法。后面的方式则使用了经典的数组语法来获取列表中的第二个条目。
attribute	当 `attribute` 通过成员函数 (例如，通过 `createAttribute()` 方法) 返回时，它是一个为属性暴露出专门接口的对象引用
namedNodeMap	`namedNodeMap` 和数组类似，但是条目是由 name 或 index 访问的，虽然后一种方式仅仅是为了枚举方便，因为在 list 中本来就没有特定的顺序。出于这个目的， `namedNodeMap` 有一个 item() 方法，你也可以从 `namedNodeMap` 添加或移除条目。

常用的 API 简要列表

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.dump()
window.scrollTo()

DOM接口：

HTML 元素接口

其他接口：

SVG接口：

SVG静态类型：

SVG动画类型：

SVG 路径段接口

SMIL 相关接口

其他的 SVG 接口

2. `地理位置 API（Geolocation API）`

获取地理信息。这就是为什么谷歌地图可以找到你的位置，而且标示在地图上。

Geolocation 接口不继承任何方法。

Geolocation.getCurrentPosition()

确定设备的位置并返回一个携带位置信息的Position 对象。
Geolocation.watchPosition()

注册一个位置改变监听器，每当设备位置改变时，返回一个 long 类型的该监听器的 ID 值。
Geolocation.clearWatch()

取消由 watchPosition() 注册的位置监听器。

使用地理位置定位

3. `画布（Canvas）` 和 `WebGL` API 可以创建生动的 2D 和 3D 图像。

人们正运用这些 web 技术制作令人惊叹的作品。参见 Chrome Experiments 以及 webglsamples。

Canvas API 提供了<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

Canvas接口：

Canvas详见链接

4. 诸如 `HTMLMediaElement` 和 `WebRTC` 等影音类 API

可以利用多媒体做一些非常有趣的事，比如在网页中直接播放音乐和影片，或用自己的网络摄像头获取录像，然后在其他人的电脑上展示（试用简易版截图 demo 以理解这个概念）。

`async` 和 `defer`

async 只能用于外部脚本，因此不适用于“内部”示例。浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只是脚本不会阻止剩余页面的显示。当页面的脚本之间彼此独立，且不依赖于本页面的其它任何脚本时，async 是最理想的选择。

defer 属性，脚本将按照在页面中出现的顺序加载和运行

如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。

<script async src="js/vendor/jquery.js"></script>

<script async src="js/script2.js"></script>

<script async src="js/script3.js"></script>

<script src="script.js" async></script>

如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>

变量

声明：let和var（可以在初始化一个变量之后用 var 声明它，它仍然可以工作；使用 var 时，可以根据需要多次声明相同名称的变量，但是 let 不能）

原始类型

数值

数字，不加引号，加引号表字符串

整数就是整数
浮点数 (浮点) 有小数点或小数位
双精度双精度是一种特定类型的浮点数，它们具有比标准浮点数更高的精度
二进制 — 计算机的最基础语言—— 0 和 1
八进制 — 基数 8，每列使用 0-7
十六进制 — 基数 16，每列使用 0-9，然后使用 a-f

字符串

给一个变量赋值为字符串时，需要用单引号或者双引号把值给包起来，否则 JavaScript 将会把这个字符串值理解成别的变量名。

Number对象可以将把传递给它的任何东西转换成数字

let myNum = Number(myString);

toString对象可以将把传递给它的任何东西转换成字符串

let myString = myNum.toString();

字符串方法

length 属性：获得字符串长度
用indexOf()方法可搜索子字符串，返回匹配到的首字母所在位置，若没有匹配到则返回-1

browserType.indexOf('zilla');

slice()可以用来提取中间字符串，在某个字符之后提取字符串中的所有剩余字符，则不必包含第二个参数，而只需要包含要从中提取的字符位置字符串中的其余字符

browserType.slice(0,3);

字符串方法toLowerCase()和toUpperCase()字符串并将所有字符分别转换为小写或大写

radData.toLowerCase();

使用replace()方法将字符串中的一个子字符串替换为另一个子字符串

browserType.replace('moz','van');

布尔

true 或 false。它们通常被用于在适当的代码之后，测试条件是否成立

null

通常用于表示某个值不存在，对null使用typeof操作符返回字符串“object”

undefined

表示更深层次的不存在，未初始化或查询不存在的对象属性或数组元素时返回undefined，没有明确返回值的函数返回的值是undefined，没有传参的函数参数的值也是undefined，是一个预定义的全局常量，需要布尔值的时候，可以当作false使用

symbol

对象类型

数组array

数组是一个单个对象，其中包含很多值，方括号括起来，并用逗号分隔。
可以将任何类型的元素存储在数组中 - 字符串，数字，对象，另一个变量，甚至另一个数组。您也可以混合和匹配项目类型 - 它们并不都是数字，字符串等
数组中包含数组的话称之为多维数组。可以通过将两组方括号链接在一起来访问数组内的另一个数组

random[2][2];

数组方法

length 属性获取数组的长度

sequence.length;

split() 方法：将字符串分隔的字符，并返回分隔符之间的子串，作为数组中的项（本质上是字符串的方法）

let myArray = myData.split(',');

join() 方法进行相反的操作

let myNewString = myArray.join(',');

toString() 方法:将数组转换为字符串
push() 当方法调用完成时，将返回数组的新长度和 pop():在数组末尾添加或删除一个项目,当方法调用完成时，将返回已删除的项目

myArray.push('Bristol');

从数组中删除最后一个元素的话直接使用 pop()

myArray.pop();

unshift() 和 shift() 从功能上与 push() 和 pop() 完全相同，只是它们分别作用于数组的开始，而不是结尾

myArray.unshift('Edinburgh');

let removedItem = myArray.shift();

对象

是现实生活中的模型的一种代码结构

let dog = { name : 'Spot', breed : 'Dalmatian' };

名为typeof的特殊的操作符 ——它会返回所传递给它的变量的数据类型

基础数学——数字和操作符

算数运算发

运算符	作用
加法+	两个数相加
减法-	从左边减去右边的数
乘法*	两个数相乘
除法/	用右边的数除左边的数
求余%	将左边的数分成同右边数字相同的若干整数部分后，返回剩下的余数
幂**	取底数的指数次方，即指数所指定的底数相乘
加法赋值+=	右边的数值加上左边的变量，然后再返回新的变量
减法赋值-=	左边的变量减去右边的数值，然后再返回新的变量
乘法赋值*=	左边的变量乘以右边的数值，然后再返回新的变量
除法赋值/=	左边的变量除以右边的数值，然后再返回新的变量

比较运算符

运算符	作用
严格等于===	测试左右值是否相同
严格不等于！==	测试左右值是否不相同
小于<	测试左值是否小于右值
大于>	测试左值是否大于右值
小于或等于<=	测试左值是否小于或等于右值
大于或等于>=	取底数的指数次方，即指数所指定的底数相乘测试左值是否大于或等于正确值