Open LinkXSystem opened 4 years ago
判断鼠标滚轮的方向
function (event) {
const delta = event.wheelDelta;
const status = delta > 0 ? true : false
...
}
什么是 document.readyState
document.readyState 有啥用
通常情况下,我们可以使用DOMContentLoaded
事件来完成监听 DOM 是否加载完成,而不是使用 document.readyState 来检查 DOM 的状态。 同时也由于 Script 都是要求放在文档底部的, 所以基本上 javascript 运行的时候 DOM 已经加载完成。
但,凡事都存在意外。
是的,当我们动态加载 script 的时候,这个问题便出现了。是的,就是你想的那样,此时 DOM 是加载完成的,DOMContentLoaded
事件是无法触发的。那么如果我们需要在动态加载完成 script 需要初始化的时候,便不能写在 DOMContentLoaded
事件 中了。所以这个时候我们就需要 document.readyState ,大概代码(PS:参考文章)如下:
if (document.readyState != 'loading') {
init();
} else {
window.addEventListener("DOMContentLoaded", function () {
init();
});
}
获取 HTML 元素中的文本
const text = dom.textContent || dom.innerText
为啥是 textContent 优先
display: none
的话, innerText 是无法获取到的回流
以获取最新的样式快速编辑页面的方法
// 开启
document.body.contentEditable = "true"
//关闭
document.body.contentEditable = "false"
DOMParser 是啥 ?
DOMParser 是可以让 HTML 字符串解析为 DOM 树,它支持下面的 mimeType 类型:
mimeType值 | 返回文档类型 |
---|---|
text/html | Document |
text/xml | XMLDocument |
application/xml | XMLDocument |
application/xhtml+xml | XMLDocument |
image/svg+xml | XMLDocument |
它的使用方法如下:
const parser = new DOMParser();
parse.parseFromString('<div>Yes! AMD</div>', 'text/html');
需要注意的是解析的类型不同,返回的结果则不相同
XMLSerializer 是啥?
XMLSerializer 是将 DOM 树对象序列化为字符串
它的使用方法如下:
const serializer = new XMLSerializer();
serializer.serializeToString(document.querySelector('.link'));
而且 serializeToString 方法会自动为 root 元素添加 xmlns 的命名空间
XMLSerializer 和 outerHTML 的区别
需要注意的是 outerHTML 只能在 Element 元素上使用, 但 XMLSerializer 可以使用任意类型,类型如下:
节点类型 | 释义 |
---|---|
DocumentType | 文档类型 |
Document | 文档 |
DocumentFragment | 文档片段 |
Element | 元素 |
Comment | 注释节点 |
Text | 文本节点 |
ProcessingInstruction | 注释节点 |
Attr | 属性节点 |
document. execCommand 是啥?
来自MDN 解析是 当一个HTML文档切换到设计模式时,document 暴露 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素
言下之意,就是在 HTML 处于编辑模式的时候,我们可以通过浏览器的内建命令来直接操作 HTML 。典型的例子便是富文本编辑器
的实现基础便是 document. execCommand 方法。
如果你想快速体验此方法,可以直接通过此comment 中的方法来尝试。
该方法的默认调用形式如下:
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
默认返回值为 Boolean,通常情况下,返回值都是 false ,即为未被启用或者是不支持。当然也有例外的命令,即使没有进入编辑模式也是可以正常使用的,如 copy
命令。
那么谈到了 document. execCommand ,便来看一个典型的应用吧,即富文本编辑器,但是这里即限于了解,至于为啥,你可以看一下这个
那么关于富文本编辑器的实现,就请到此问题上吧,issue
MutationObserver 是啥?
MutationObserver 使用监控指定 DOM 节点变化的 API,包括文本变更,属性更新等操作
基本的调用形式如下:
const ObserverCallback = function() {
...
}
const observer = new MutationObserver(ObserverCallback);
// 指定监听的对象
const target = document.body;
// 指定监听的配置
const options = { attribute: true };
// 启动监听
observer.observe(target, options});
// 停止监听
observer.disconnect();
MutationObserver 使用十分简单,但是我们需要注意它的配置参数有哪些?参数如下:
attributes:设为true以观察受监视元素的属性值变更。默认值为false
attributeFilter:要监视的属性名称的数组,当 attribute 为 true 且未设置时,将监视节点的 所有 属性的更改
attributeOldValue:设置为 true 时,只要发生更改,就会记录该属性的先前值
subtree:设置为 true 还可以观察到所观察元素的子节点的更改
childList:设置为 true 以监视元素的添加和删除子节点动作。当 subtree 设置为 true 时,还将监视子元素中子节点的添加和删除
characterData:设置为 true 时,它将记录文本节点中文本的更改,因此这仅适用于 Text 节点,不适用于 HTMLElement。为此,要观察的节点必须是 Text 节点,或者,如果观察者监视 HTMLElement,则需要将 option subtree 设置为 true,以监视子节点的更改
characterDataOldValue:设置为 true 时,每当发生更改时,将记录特征数据的先前值
注意, attributes / characterData / childList 三者中需要必须有一个为 true
为啥,Callback 中返回的 MutationRecord 对象的 type 字段对应的类型便是 attributes / characterData / childList 之一 。下面是 Callback 的参考示例:
// 参数依次为 MutationRecord 对象的数组,以及调用的观察者
const ObserverCallback = function(mutations, observer) {
mutations.forEach(mutation => {
switch (mutation.type) {
case "attributes":
...
break;
case "childList":
...
break;
}
});
};
那么 MutationRecord 对象具体包含的属性如下:
type:更改的类型,可以是 attribute、characterData 或 childList
target:已更改的元素,可以是属性、字符数据或子元素
addNodes:已添加节点的列表;如果未添加,则为空的 NodeList
removeNodes:已删除节点的列表;如果未删除任何节点,则为空 NodeList
attributeName:更改后的属性名称;如果未更改任何属性,则为 null
previousSibling:添加或删除的节点的上一个同级,或者为 null
nextSibling:添加或删除的节点的下一个同级,或者为 null
禁止手动修改对象的方式
使用 Object.preventExtensions 方法 作用: 禁止为对象添加属性和方法。但已存在的属性和方法可以被修改或删除 样例:
let x = { name: 'ni' };
// 使用
Object.preventExtensions(x);
// 判断是否使用
Object.isExtensible(x); // true
使用 Object.seal 方法 作用: 禁止为对象删除已存在的属性和方法。被密封的对象也是不可扩展的 样例:
let x = { name: 'ni' };
// 使用
Object.seal(x);
// 判断是否使用
Object.isSealed(x); // true
使用 Object.freeze 方法 作用: 禁止为对象修改已存在的属性和方法。所有字段均只读。被冻结的对象也是不可扩展和密封的 样例:
let x = { name: 'ni' };
// 使用
Object.freeze(x);
// 判断是否使用
Object.isFrozen(x); // true
注意:以上方法均不可逆
用于记录一些常见的前端的小技巧的代码片段