type
status
date
slug
summary
tags
category
icon
password
📝 主旨内容
document.write()与innerHTML的区别
document.write()是document对象中的方法，在页面中插入的位置为脚本元素script的位置，可以多次调用实现拼接。文档解析完再调用会覆盖原有内容，否则不会。
document.write()
我们先看这段代码
解析：
上面这段代码的效果是，利用window.onload方法在页面加载完成后再调用document.write()方法。因此页面原本的内容会被覆盖掉。
再看这段代码
解析：
在匿名函数结尾多加了一堆括号()将匿名函数变成了立即执行函数
此时匿名函数会立即执行，不会等待页面加载完成。
这意味着
document.write("做大做强，再创辉煌！") 会在当前上下文中立即执行，而不是等待页面加载完成。window.onload 会变成无效的事件绑定被设置为 undefined，因为函数已经执行完毕，返回值为 undefined。由于script标签在body末尾，因此
document.write() 中的内容被插入在页面末尾。innerHTML
针对特定元素内容进行更改，不会覆盖其他元素的内容
总结：
ㅤ | document.write() | innerHTML |
类型 | document对象中的方法 | 存在于Element对象中的属性 |
插入位置 | 脚本元素script的位置 | 指定的元素内 |
拼接方法 | 多次调用 | 利用+= |
覆盖问题 | 文档解析完再调用会覆盖，否则不会 | 直接调用会覆盖原内容 |
textContent、innerText 与innerHTML的区别
- textContent 会获取除标签外的所有内容
- innerText 会受到 css 的影响，仅会获取实际可以看到的内容，隐藏内容会被忽略
- innerHTML 会获取所有内容，包括标签
直接用一段代码来展示
从结果里我们可以清晰的看出 textContent、innerText 和 innerHTML 的区别。
总结差异
- 行为区别
textContent和innerText获取的是元素内容；innerHTML获取的是元素的 html 文本textContent会获取所有元素的内容，包括script和style元素；innerText不会innerText会受到 css 影响，不会返回隐藏内容；textContent不会- 使用
innerHTML设置内容，会将内容解析为 html，所以性能相对较差，还可能存在 XSS 攻击；而因为文本不会被解析，则textContent和innerText不会有这个问题，性能更好。 - 因为
innerText受样式影响，会触发重排，而textContent不会。
- 归属区别
textContent是Node对象的属性innerText是Element对象的属性innerHTML是HTMLElement对象的属性
用法上的区别
- textContent和innerText只能设置纯文本，innerHTML可以进行标签的生成
🤗 总结归纳
时间紧任务重，初学最重要的是掌握主干，像我这样钻研细节实属愚蠢。
📎 参考文章
- 作者:江牧
- 链接:https://lawyerjiang.top/article/key/js/1
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。