不被注意的web api-优快云博客

本文链接：https://blog.youkuaiyun.com/Bendition/article/details/100072666

本文深入讲解JavaScript中的实用技巧，包括类数组转换、getAttribute方法、contenteditable属性、classList操作、contains方法、在线状态监听、及自定义事件广播。掌握这些技能，能够显著提升前端开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

❤ 数组与类数组：

类数组：

拥有length属性
不具有数组具有的方法
类数组是一个普通对象，而真实的数组是Array类型。

常见的类数组有：函数的参数 arugments, DOM对象列表( docuemnt.queryselectAll得到的列表)， JQuery对象(比如 $(“div”)).

但类数组可以转换为数组:

	//第一种方式
	Array.prototype.slice.all(arrayLike,start);
	//第二种方式
	[...arrayLike]
	//第三种方式
	Array.from(arrayLike);

任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组。

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象。转换完毕后即可使用forEach、map等

❤ getAttribute

使用getAttribute获取标签属性

	<a target="我将要被获取">	学习使用getattribute获取标签属性</a>

	document.querySelector("app").getAttribute("target");//我将要被获取

❤ contenteditable

我们为标签定义 contenteditable 属性，让其可以被编辑（div，p标签等）。使用 console.log(document.querySelector("#app").innerHTML)来获取其内部文字?

❤ classList
classlist内部封装了许多操作元素类名的方法：

html:   
		<p class="title"></p>
js:		
		let elem = document.querySelector("p");
		
		// 增加类名
		elem.classList.add("title-new"); // "title title-new"
		
		// 删除类名
		elem.classList.remove("title"); // "title-new"
		
		// 切换类名（有则删、无则增，常用于一些切换操作，如显示/隐藏）
		elem.classList.toggle("title"); // "title-new title"
		
		// 替换类名
		elem.classList.replace("title", "title-old"); // "title-new title-old"
		
		// 是否包含指定类名
		elem.classList.contains("title"); // false

❤ contains
可以判断指定元素是否包含了指定的子元素：

<div>
	<p></p>
</div>

document.querySelector("div").contains(document.querySelector("p")); // true

❤ online state
监听当前网络状态，然后执行对应的方法

	window.addEventListener("online", xxx);

	window.addEventListener("offline", () => {
	  alert("你断网啦！");
	});

❤ customEvent

事件广播监听

	//定义广播
	window.addEventListener("follow", event => {
	  	console.log(event.detail); // 输出 {name: "前端宇宙情报局"}
	});
	//广播捕获
	window.dispatchEvent(new CustomEvent("follow", {
	  detail: {
	    name: "前端宇宙情报局"
	  }
	}));