JavaScript

在线执行代码
https://tool.lu/coderunner/

廖雪峰JavaScript教程
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

Mozilla MDN JS教程
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

---

字符串

模板字符串

模板字符串使用反引号 "" (键盘左上角波浪线下面的字符) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}` ）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来。
在模版字符串内使用反引号时，需要在它前面加转义符（\）

如果有很多变量需要连接，用+号就比较麻烦。ECMAScript 6(ES 6) 新增了一种模板字符串，表示方法和上面的多行字符串一样，但是它会自动替换字符串中的变量：
例如拼接当前页面的链接：

var pageRef = `<a href="${window.location.protocol}//${window.location.host}${window.location.pathname}">当前页面链接</a>`

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

字符串判空

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
  var variable2 = variable1;
}

字符串等值比较

JavaScript 有两种相等运算符：
1、一种是完全向后兼容的，标准的 ==，如果两个操作数类型不一致，它会在某些时候自动对操作数进行类型转换，考虑下面的赋值语句：

var strA = "i love you!";
var strB = new String("i love you!");

这两个变量含有相同的字符序列，但数据类型却不同，前者为string，后者为object，在使用 == 操作符时，JavaScript 会尝试各种求值，以检测两者是否会在某种情况下相等。所以下面的表达式结果为 true： strA == strB。

2、第二种操作符是”严格”的 ===，它在求值时不会这么宽容，不会进行类型转换。所以表达式 strA === strB 的值为false，虽然两个变量持有的值相同。
有时代码的逻辑要求你判断两个值是否不相等，这里也有两个选择：”!=”和严格的”!==”，它们的关系就类似于”==”和”===”。

“==”和”!=”在求值时会尽可能地寻找值的匹配性，但你可能还是想在比较前进行显式的类型转换，以”帮助”它们完成工作。比如，如果想判断一个用户的输入值（字符串）是否等于一个数字，你可以让”==”帮你完成类型转换：

if(document.form1.txtAge.value == someNumericVar) {
   …
}

也可以提前转换：

if(parseInt(document.form1.txtAge.value) == someNumericVar) {
  …
}

字符串大小比较

javascript 字符串在进行大于(小于)比较时，会根据第一个不同的字符的 ascii 值码进行比较。
当数字(number)与字符串(string)进行比较大小时，JavaScript 会首先将其转化为数字（number）再判定大小。

var numbers = ['APP_20221219', 'APP_20221221', 'APP_20221227'];
numbers.forEach((item, index) => {
    if (item < 'APP_20221224') {
        console.log(item)
    }
});

结果
APP_20221219 APP_20221221

---

substring()

substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。
str.substring(indexStart[, indexEnd])
indexStart 需要截取的第一个字符的索引，该索引位置的字符作为返回的字符串的首字母。
indexEnd 可选。一个 0 到字符串长度之间的整数，以该数字为索引的字符不包含在截取的字符串内。

---

slice() 字符串切片

slice(start, end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
参数：
start 必须。 要抽取的片断的起始下标，第一个字符位置为 0。如果为负数，则从尾部开始截取。
end 可选。 紧接着要截取的片段结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。

slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

---

startsWith() 以开头

startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false。

const str1 = 'Saturday night plans';

console.log(str1.startsWith('Sat'));
// expected output: true

console.log(str1.startsWith('Sat', 3));
// expected output: false

String.prototype.startsWith()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

---

includes() 是否包含子串

includes() 方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。
includes() 方法是区分大小写的。

var string = "foo", substring = "oo";
console.log(string.includes(substring));

String.prototype.includes()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/includes

---

atob() base64 解码

var b64s = ['dGhpcyBpcyBtYXNpa2tr', 'dGhpcyBpcyBkZGRkZA=='];
b64s.forEach((item, index) => {console.log(atob(item))});

How can you encode a string to Base64 in JavaScript?
https://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript

---

数组

forEach() 遍历

Array.prototype.forEach()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

forEach() 方法是一个迭代方法。它按索引升序地为数组中的每个元素调用一次提供的 callbackFn 函数。

语法：

forEach(callbackFn)
forEach(callbackFn, thisArg)

参数：
callbackFn 是为数组中每个元素执行的函数：

• element 必需，数组中正在处理的当前元素。
• index 可选，数组中正在处理的当前元素的索引。
• array 可选，调用了 forEach() 的数组本身。

thisArg 可选。执行 callbackFn 时用作 this 的值。如果这个参数为空， "undefined" 会传递给 "this" 值。
最终由 callbackFn 观察到的 this 值根据通常的规则 确定：如果 callbackFn 是非严格模式（译注：正常模式/马虎模式），原始 this 值将被包装为对象，并将 undefined/null 替换为 globalThis。对于使用 箭头函数 定义的任何 callbackFn 来说，thisArg 参数都是无关紧要的，因为箭头函数没有自己的 this 绑定。

语法形式

// 箭头函数
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })

// 回调函数
forEach(callbackFn)
forEach(callbackFn, thisArg)

// 内联回调函数
forEach(function(element) { /* … */ })
forEach(function(element, index) { /* … */ })
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)

例1，forEach 遍历数组对象

var numbers = ['hello', 'my', 'world'];
numbers.forEach((item, index) => {console.log(item)});

---

map()

Array.prototype.map()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

例如：

function pow(x) {
    return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

对 b64s 做流式处理：

var b64s = ['app1@dGFibGUxL3RoaXMgaXMgbWFzaWtraw==', 'app2@dGFibGUyL3RoaXMgaXMgZGRkZGQ='];
b64s
    .map((item, index) => {
        return item.substring(item.indexOf('@') + 1)
     })
    .map((item, index) => {
        return atob(item);
     })
    .forEach((item, index) => {
        var tabname = item.substring(0, item.indexOf('/'));
        var str = item.substring(item.indexOf('/')+1);
    console.log(tabname, str);
     });

---

reduce()

Array.prototype.reduce()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

reduce() 方法对数组中的每个元素执行一个传入的 reducer 函数(升序执行)，将其结果汇总为单个返回值。

语法：

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback 执行数组中每个值的函数，包含四个参数：

• accumulator 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。
• currentValue 数组中正在处理的元素。
• currentIndex 可选 数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则为1。
• array 可选 调用reduce()的数组

initialValue 可选 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
返回值 函数累计处理的结果

回调函数第一次执行时，accumulator 和 currentValue 的取值有两种情况：如果调用 reduce() 时提供了 initialValue，accumulator 取值为 initialValue，currentValue 取数组中的第一个值；如果没有提供 initialValue，那么 accumulator 取数组中的第一个值，currentValue 取数组中的第二个值。

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

例如

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

---

js求集合并集交集差集

a = [1, 2, 3];
b = [2, 4, 5];

// 并集
let union = a.concat(b.filter(v => !a.includes(v))) // [1,2,3,4,5]
console.log(union)

// 交集
let intersection = a.filter(v => b.includes(v)) // [2]
console.log(intersection)

// 差集
let difference = a.concat(b).filter(v => !a.includes(v) || !b.includes(v)) // [1,3,4,5]
console.log(difference)

---

js数组元素去重

a = [1,2,2,3,4];

b = Array.from(new Set(a));
console.log(b);

js数组判空

var arr = [];
if(Array.isArray(arr) && arr.length === 0){
    console.log('是空数组');
}

---

对象

判断对象是否包含某个key

1、in 运算法
如果指定的属性在指定的对象或父类中，则in 运算符返回true

if ( !'WebSocket' in window) {
}

2、hasOwnProperty
返回一个布尔值,指示对象自身属性是否有指定的属性
和in不同，会忽略继承到的属性
即使属性的值是null,undefined,只要属性存在,hasOwnProperty依旧会返回true

if (!window.hasOwnProperty("WebSocket")) {
}

if (!window.WebSocket) {
}

---

图片

图片file转base64

const fileToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
};

fileToBase64(file).then((base64) => {
  console.log(base64);
});

---

Math 对象

random() 0-1间的随机数

Math.random() 返回介于 0（包含） ~ 1（不包含） 之间的一个随机数：

---

Number 对象

toString() 转化为字符串

number.toString(radix)
radix 可选。规定表示数字的基数，是 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。
但是要注意，如果该参数是 10 以外的其他值，则 ECMAScript 标准允许实现返回任意值。
2 - 数字以二进制值显示
8 - 数字以八进制值显示
16 - 数字以十六进制值显示
36 - 基数 36 表示使用数字 0-9 和字母 a-z 来表示数字。

---

全局函数

encodeURIComponent()

可把字符串作为 URI 组件进行编码
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

JSON.stringify() JSON序列化

将 JavaScript 值转换为 JSON 字符串

例如将一个 js 对象转为 json 串：

var person={firstname:"John", lastname:"Doe", id:5566};
console.log(JSON.stringify(person));

例如使用 Ajax 发送请求时，用 JSON.stringify() 将 变量 转为 json 串

var req = {"name":"name", "site":"http://www.masikkk.com"}
data: JSON.stringify(req)

JSON.parse() JSON反序列化

将一个 JSON 字符串转换为对象
JSON.parse(text[, reviver])
text:必需， 一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

---

全局变量和局部变量

在 JavaScript 中，常常把定义在函数外的变量称为全局变量；而在函数内声明的变量称为局部变量。

var variable = 'global';

function checkVariable () {
    var variable = 'local';
    console.log(variable); // local
}

checkVariable();
console.log(variable); // global

上面的示例，在函数 checkVariable() 外声明了一个全局变量 variable, 同时在函数内声明了一个局部变量 variable。

variable = 'global';

function checkVariable() {
    variable = 'local';
    console.log(variable); // local
    myVariable = 'local';
    console.log(myVariable); // local
}

checkVariable();

console.log(variable); // local
console.log(myVariable); // local

在全局作用域中声明变量可以省略 var 关键字，但如果在函数体内声明变量时不使用 var 关键字，这样会隐式的声明了全局变量。
即使该语句是在一个 function 内，当该 function 被执行后就变成了全局变量。

所以：
声明局部变量一定要使用 var 关键字，使用 var 关键字声明变量时，变量会自动添加到距离最近的可用环境中。如果没有写 var, 变量就会暴露在全局上下文中, 这样很可能会和现有变量冲突

编写可维护的JavaScript-全局变量
https://segmentfault.com/a/1190000021219901

---

window 对象（浏览器窗口）

Window
https://developer.mozilla.org/zh-CN/docs/Web/API/Window

所有浏览器对象的最顶层是 window 对象​​。它代表当前打开的浏览器窗口或标签页。
window 对象表示一个包含 DOM 文档的窗口，其 document 属性指向窗口中载入的 DOM文档 。
window 作为全局变量，代表了脚本正在运行的窗口，暴露给 Javascript 代码。

window 对象常用操作方法：
window.innerWidth 浏览器窗口的宽度(不包含工具栏) console.log(window.innerWidth)
window.innerHeight 浏览器窗口的高度(不包含工具栏) console.log(window.innerHeight)
window.open() 打开新浏览器窗口 window.open("https://example.com")
window.close() 关闭当前窗口 window.close()
window.scrollTo() 滚动到指定位置 window.scrollTo(0, 500)
window.alert() 显示警告弹窗 window.alert("警告信息")
window.setTimeout() 设置延迟执行的定时器 setTimeout(() => {}, 1000)
window.setInterval() 设置周期性执行的定时器 setInterval(() => {}, 1000)

window 对象可以省略，如: alert() 等价于 window.alert()

pageYOffset = scrollY 文档在垂直方向已滚动的像素值，文档从顶部开始滚动过的像素值
pageYOffset 属性是 scrollY 属性的别名
为了跨浏览器兼容，请使用 window.pageYOffset 代替 window.scrollY

---

document 对象

document 对象是 window 对象中最重要的二级对象，代表当前窗口加载的 HTML 文档
由于 window 对象可以省略，可以直接使用 document 对象，所以 window.document === document

// document 是 window 的属性
console.log(window.document === document); // true

// 实际用例
const title = document.title; // 获取页面标题
const bodyContent = document.body.innerHTML; // 获取 body 内容
const element = document.getElementById("myElement"); // 获取 DOM 元素

referrer 上一个页面url

document.referrer 返回 跳转或打开到当前页面 的页面的 URI
如果用户直接打开了这个页面（不是通过页面跳转，而是通过地址栏或者书签等打开的），则该属性为空字符串。

---

location 对象

Location 对象存储在 Window 对象的 Location 属性中，表示当前窗口中显示的文档的 Web 地址。
location 对象包含当前 URL 的信息并提供导航方法。
它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。

当一个 Location 对象被转换成字符串，href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href

Location
https://developer.mozilla.org/zh-CN/docs/Web/API/Location

主要属性 及 操作

console.log(window.location === location); // true

// location 的关键属性和方法
location.href;      // 完整 URL
location.protocol;  // http: 或 https:
location.host;      // 主机名和端口
location.hostname;  // 域名
location.pathname;  // 路径部分
location.search;    // 查询字符串 (?后部分)
location.hash;      // 哈希部分 (#后部分)

location.reload();  // 重新加载当前页面
location.assign("https://new-url.com"); // 导航到新页面
location.replace("https://new-url.com"); // 替换当前页面

href 页面完整url

protocol 协议

包含URL对应协议的一个DOMString，最后有一个":"。

host 域名:端口号

对于没有端口的页面， host 等于 hostname
对于带端口的页面， host 包括整个 域名:端口， hostname只包含域名

hostname 不带端口号的域名

port 端口号

pathname url的path

包含URL中路径部分的一个DOMString，开头有一个“/"

search url的查询串

包含URL参数的一个DOMString，开头有一个“?”

hash 页内锚点

包含块标识符的DOMString，开头有一个“#”

origin 源信息(只读)

包含页面来源的域名的标准形式

通过location获取当前页面的url等信息

window.location.protocol: http:
window.location.host: localhost:4000
window.location.hostname: localhost
window.location.origin: http://localhost:4000
window.location.pathname: /article/JavaScript/
window.location.href: http://localhost:4000/article/JavaScript/

window.location与document.location

window 对象的 location 属性 等于 document 对象的 location 属性， 都是引用了 location 对象

window.location === document.location //true
document.location===location // true
window.location===location // true

---

navigator 浏览器及操作系统

navigator 提供浏览器和操作系统的信息

console.log(navigator.userAgent); 
// 示例输出: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36..."

navigator.platform;  // 操作系统平台
navigator.language;  // 浏览器主语言
navigator.onLine;    // 是否联网
navigator.geolocation; // 获取位置信息接口

// 实际应用：检测浏览器功能
if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else {
    console.log("地理定位不可用");
}

platform 操作系统

platform 属性是一个只读的字符串，声明了运行浏览器的操作系统和（或）硬件平台。

userAgent 用户代理

userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。
一般来讲，它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。
例如 "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"

注 用户代理头中也有个 user-agent header

---

screen 屏幕信息

screen.width;       // 屏幕宽度（以像素为单位）
screen.height;      // 屏幕高度
screen.availWidth;  // 可用屏幕宽度（减去窗口装饰）
screen.availHeight; // 可用屏幕高度
screen.colorDepth;  // 颜色深度（位）
screen.pixelDepth;  // 像素深度（位）

// 应用场景：响应式设计
if (screen.width < 768) {
    document.body.classList.add("mobile-layout");
}

---

console 控制台

console 提供浏览器控制台接口

console.log("日志消息");
console.error("错误消息");
console.warn("警告消息");
console.info("信息消息");
console.debug("调试消息");

console.group("分组标题");
console.log("组内消息");
console.groupEnd();

console.table([{name: "John", age: 30}, {name: "Jane", age: 25}]);

// 计时功能
console.time("timer");
// 执行一些操作...
console.timeEnd("timer"); // 显示执行时间

---

history 历史记录

history.length;     // 历史记录中的条目数
history.state;      // 当前历史记录的关联状态对象

history.back();     // 返回上一页
history.forward();  // 前进到下一页
history.go(-2);     // 后退两页

// 添加历史记录并更改URL（不会实际加载页面）
history.pushState({page: "settings"}, "Settings", "/settings"); 

---

sessionStorage 会话存储

会话存储（标签页关闭时清除）
不同 源（Origin） 之间 sessionStorage 是隔离的，不同标签页之间也是隔离的。

sessionStorage.setItem("sessionId", "xyz123");
const id = sessionStorage.getItem("sessionId");

---

localStorage 持久化存储

持久性存储（关闭浏览器后仍然存在）
不同 源（Origin） 之间 localStorage 是隔离的。

// 保存数据
localStorage.setItem("username", "john_doe");
localStorage.setItem("preferences", JSON.stringify({theme: "dark"}));

// 读取数据
const username = localStorage.getItem("username");
const preferences = JSON.parse(localStorage.getItem("preferences"));

// 移除数据
localStorage.removeItem("username");
localStorage.clear(); // 清除所有

---

indexedDB 数据库

大型结构化数据存储
不同 源（Origin） 之间 indexedDB 是隔离的。

// 打开数据库
const request = indexedDB.open("myDatabase", 1);

request.onupgradeneeded = (event) => {
    const db = event.target.result;
    const store = db.createObjectStore("users", {keyPath: "id"});
    store.createIndex("email", "email", {unique: true});
};

request.onsuccess = (event) => {
    const db = event.target.result;

    // 添加数据
    const transaction = db.transaction("users", "readwrite");
    const store = transaction.objectStore("users");
    store.add({id: 1, name: "John", email: "john@example.com"});

    // 获取数据
    const getRequest = store.get(1);
    getRequest.onsuccess = () => {
        console.log(getRequest.result);
    };
};

---

DOM 操作

// 获取<html>元素，即 根元素
const root = document.documentElement;

// 获取<head>和<body>
const head = document.head;
const body = document.body;

// 获取所有<h1>元素
const headings = document.getElementsByTagName("h1");

// 使用CSS选择器查找元素
const element = document.querySelector("#container > .item");

// 遍历元素
const listItems = document.querySelectorAll("ul > li");
listItems.forEach(item => {
    console.log(item.textContent);
});

// 动态修改DOM
const newDiv = document.createElement("div");
newDiv.textContent = "新添加的元素";
document.body.appendChild(newDiv);

const toRemove = document.getElementById("oldElement");
toRemove.parentNode.removeChild(toRemove);

---

scrollTop()

scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】，即元素距离他容器顶部的像素距离
当滚动条位置位于最顶部时，位置是0；即当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0。
当滚动条位置位于最底部时，位置是元素的高度；

1.未设置时默认为0
2.为负值时不做任何响应
3.设置为超出本身最大值时，默认为最大值

scrollTop() 实现聊天窗口自动滚动

<div id="div-received-msg" class="div-received-msg"></div>
// 始终显示滚动条最底部
$("#div-received-msg").scrollTop($("#div-received-msg").prop("scrollHeight"));

其中 scrollHeight 是对象的高度，包含内边距，但不包括水平滚动条、边框和外边距。

scrollTop() 实现瀑布数据流加载

如果元素滚动到底，下面等式返回true，没有则返回false.
element.scrollHeight - element.scrollTop === element.clientHeight

---

JavaScript 获取 html 元素值

JavaScript 中取得元素的方法有4种：分别是：

• 1、getElementById() ：通过id取得HTML元素。
• 2、getElementsByName() ：通过name取得元素，是一个数组。
• 3、getElementsByTagName() ：通过HTML标签取得元素，是一个数组。
• 4、getElementsByClassName() ：根据类名获得元素，是一个数组

getElementById()

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。
不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。

例1，获取元素标签内的值

<html>
  <head>
  <script type="text/javascript">
    function getValue()
      {
      var x=document.getElementById("myHeader")
      alert(x.innerHTML)
      }
  </script>
  </head>

  <body>
    <h1 id="myHeader" onclick="getValue()">This is a header</h1>
    <p>Click on the header to alert its value</p>
  </body>
</html>

例2，自定义id(x)方法
getElementById() 是一个重要的方法，在 DOM 程序设计中，它的使用非常常见。我们为您定义了一个工具函数，这样您就可以通过一个较短的名字来使用 getElementById() 方法了：

function id(x) {
  if (typeof x == "string") return document.getElementById(x);
  return x;
  }

上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数，您只要在使用前编写 x = id(x) 就可以了。

---

getElementsByName()

getElementsByName() 方法可返回带有指定名称的对象的集合。
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

例，统计文档内name为myInput的标签有多少个

<html>
  <head>
    <script type="text/javascript">
    function getElements()
      {
      var x=document.getElementsByName("myInput");
      alert(x.length);
      }
    </script>
  </head>

  <body>
    <input name="myInput" type="text" size="20" /><br />
    <input name="myInput" type="text" size="20" /><br />
    <input name="myInput" type="text" size="20" /><br />
    <br />
    <input type="button" onclick="getElements()" value="名为 'myInput' 的元素有多少个？" />
  </body>
</html>

---

getElementsByTagName()

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
注意：传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

例1，统计文档内有多少个input标签

<html>
  <head>
    <script type="text/javascript">
      function getElements()
        {
        var x=document.getElementsByTagName("input");
        alert(x.length);
        }
    </script>
  </head>

  <body>
    <input name="myInput" type="text" size="20" /><br />
    <input name="myInput" type="text" size="20" /><br />
    <input name="myInput" type="text" size="20" /><br />
    <br />
    <input type="button" onclick="getElements()" value="How many input elements?" />
  </body>
</html>

例2，统计文档内有多少表格table

var tables = document.getElementsByTagName("table");
alert ("This document contains " + tables.length + " tables");

例3，获得文档中的第4个段落
如果您非常了解文档的结构，也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。例如，下面的代码可以获得文档中的第四个段落：
var myParagragh = document.getElementsByTagName("p")[3];
不过，如果您需要操作某个特定的元素，使用 getElementById() 方法将更为有效。

例4，获取id="main"的元素中的所有p元素
下面的例子返回包含文档中所有p元素的列表，并且这些p元素应该是 id="main" 的元素的后代（子、孙等等）：
document.getElementById("main").getElementsByTagName("p");

---

getElementsByClassName()

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象，元素在集合中的顺序以其在代码中的出现次序排序。
若获取class为多个类的元素，多个类名使用空格分隔，如 "test demo"。
NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。
注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。

例1，获取class为"example"和"color"的所有元素
var x = document.getElementsByClassName("example color");

例2，统计文档中有多少个class为example的元素

<html>
  <body>
    <div class="example">样式 class="example" 的 div 元素</div>
    <div class="example">另外一个样式 class="example" 的 div 元素</div>
    <p class="example">样式 class="example" 的 p 元素</p>
    <p>点击按钮查看文档中有多少个类名为 "example" 的元素。</p>
    <button onclick="myFunction()">点我</button>
    <p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
    <p id="demo"></p>

    <script>
    function myFunction() {
        var x = document.getElementsByClassName("example");
        document.getElementById("demo").innerHTML = x.length;
    }
    </script>
  </body>
</html>

例3，修改所有样式class为"example"的元素的背景颜色

<html>
  <head>
    <style>
      .example {
          border: 1px solid black;
          margin: 5px;
      }
    </style>
  </head>

  <body>
    <div class="example">样式 class="example" 的 Div 元素</div>
    <div class="example">另外一个样式 class="example" 的 Div 元素</div>
    <p class="example">样式为 class="example" 的 p 元素。</p>
    <p>这是一个插入在 p 元素中样式 class="example" 的<span class="example">span</span> 元素 。</p>
    <p>点击按钮修改所有样式 class="example" 的背景颜色。</p>
    <button class="example" onclick="myFunction()">点我</button>
    <p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>

    <script>
    function myFunction() {
        var x = document.getElementsByClassName("example");
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.backgroundColor = "red";
        }
    }
    </script>
  </body>
</html>

例4，修改第一个类为"example color"的div元素的背景颜色

<html>
  <head>
    <style>
      div {
          border: 1px solid black;
          margin: 5px;
      }
    </style>
  </head>

  <body>
    <div class="example">
      <p>P 元素在在第一个样式为 class="example" 的 Div 元素中。Div 的索引值为 0。</p>
    </div>
    <div class="example color">
      <p>P 元素在在第一个样式为 class="example color" 的 Div 元素中。Div 的索引值为 0。</p>
    </div>
    <div class="example color">
      <p>P 元素在在第二个样式为 class="example color" 的 Div 元素中。Div 的索引值为 1。</p>
    </div>
    <p>点击按钮修改第一个类为 "example color" 的 div 元素的背景颜色。</p>
    <button onclick="myFunction()">点我</button>
    <p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>

    <script>
    function myFunction() {
        var x = document.getElementsByClassName("example color");
        x[0].style.backgroundColor = "red";
    }
    </script>
  </body>
</html>

• HTML DOM getElementsByClassName() 方法
  http://www.runoob.com/jsref/met-document-getelementsbyclassname.html

---

innerHTML 与 value 的区别

getElementById().innerHTML 与 getElementById().value 的区别
有value属性的标签才能操作其value值，只有input等表单输入标签才有value值。
例如：
<input type="text" id="txt1" value="hello"/>
这样一个元素，当你使用document.getElementById("txt1").value时，可以得到其value值，即"hello"这个字符串。
如果一个元素没有value值，那么使用document.getElementById().value时是取不到。这是理所当然的，没有的东西怎么访问？
比如一个div标记，就不一定有value值。

innerHTML是指元素起始标记和结束标记之间的内容。
例如：
<label id="lb1">this is a label</label>
当你使用document.getElementById("lb1").innerHTML可以取到<label>与</label>之间的内容，即“this is a label”。

一个实例如下：

<html>
  <head>
    <script type="text/javascript">
      function getValue()
      {
      var x=document.getElementById("myHeader")
      alert(x.innerHTML)
      }
      function getValue2()
      {
      var x=document.getElementById("myInput")
      alert(x.value)
      }
    </script>
  </head>

  <body>
    <h1 id="myHeader" onclick="getValue()">这是标题</h1>
    <input id="myInput" type="text" value="value值" onclick="getValue2()" />
    <p>点击标题，会提示出它的innerHTML值。</p>
    <p>点击input框，会提示出它的value值。</p>
  </body>
</html>

---

cookie 操作

// 设置cookie
document.cookie = "username=john_doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

// 读取cookie
function getCookie(name) {
    const cookies = document.cookie.split(';');
    for (const cookie of cookies) {
        const [key, value] = cookie.split('=');
        if (key.trim() === name) return decodeURIComponent(value);
    }
    return null;
}

console.log(getCookie("username"));

---

js-cookie 操作 cookie

https://github.com/js-cookie/js-cookie

---

优化

JavaScript 的性能优化：加载和执行
https://www.cnblogs.com/chutianshu1981/p/3792142.html

---

三方库

iziToast Toast通知

https://github.com/marcelodolza/iziToast

https://marcelodolza.github.io/iziToast/

<!-- 头部 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css">
<!-- 页面底部 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>

// 默认配置
iziToast.settings({
    position: 'topRight',           // 默认显示位置：右上角
    timeout: 3000,                  // 默认显示时间：3000毫秒（3秒）
    resetOnHover: true,             // 鼠标悬停时重置计时器
    transitionIn: 'fadeInLeft',     // 进入动画：从左淡入
    transitionOut: 'fadeOutRight',  // 退出动画：向右淡出
    closeOnClick: true,             // 点击关闭
    progressBar: true,              // 显示进度条
    layout: 1,                      // 布局样式：1表示纯色背景
    theme: 'light',                 // 主题：亮色
    maxWidth: 300                   // 最大宽度：300像素
});

// 几种预置通知类型
iziToast.info({...})    // 蓝色信息通知
iziToast.success({...}) // 绿色成功通知
iziToast.warning({...}) // 橙色警告通知
iziToast.error({...})   // 红色错误通知

// 自定义通知
iziToast.show({
  title: '提示',
  message: '这是来自 iziToast 的通知!',
  position: 'topCenter',
  timeout: 3000,
  progressBar: true,
  closeOnClick: true,
  backgroundColor: '#17a2b8',
  theme: 'dark'
});

常用参数：
title: 通知标题
message: 通知内容
position: 位置 (默认 bottomRight，支持 topRight, topCenter, bottomCenter 等)
timeout: 自动关闭时间（默认 5000 毫秒）
color: 通知背景色

---