JavaScript document.write()介绍（直接将内容写入HTML文档的早期方法，已逐渐被现代DOM操作方法取代）
文章目录
- **一、基本语法**
- **二、核心功能**
- 1. **在文档加载阶段写入**
- 2. **文档加载后调用会导致覆盖**
- **三、注意事项**
- 1. **覆盖风险**
- 2. **性能问题**
- 3. **XSS 漏洞**
- 4. **已关闭的文档流**
- **四、使用场景（不推荐，但需了解）**
- **五、现代替代方案**
- 1. **操作 DOM 元素**
- 2. **创建新元素**
- 3. **使用 `textContent` 防 XSS**
- **总结**
document.write() 是 JavaScript 中一个直接将内容写入 HTML 文档的早期方法。以下是其详细介绍：
一、基本语法
document.write(content);
- 参数：
content可以是字符串、HTML 标签或变量，如document.write("<h1>Hello</h1>")。
二、核心功能
1. 在文档加载阶段写入
当页面解析到 <script> 标签时，document.write() 会在当前位置插入内容：
<body><script>document.write("<p>插入到 body 中的段落</p>");</script>
</body>
输出效果：内容直接显示在 <script> 标签所在位置。
2. 文档加载后调用会导致覆盖
若在页面加载完成后（如通过按钮点击触发），使用 document.write() 会清空整个页面：
<!DOCTYPE html><html><head><title>JavaScript练习</title></head><body><h1>原始页面内容</h1><button id="myButton">点击覆盖页面</button><script>// 获取按钮元素const button = document.getElementById("myButton");// 绑定点击事件button.onclick = () => {document.write("页面已重置！"); // 点击后清空整个页面};</script></body></html>
三、注意事项
1. 覆盖风险
在异步代码或事件中调用时，内容会覆盖原有页面（触发 document.open()）。
2. 性能问题
频繁使用会阻塞页面渲染，影响性能。
3. XSS 漏洞
直接插入未过滤的用户输入可能导致安全风险：
// 避免直接插入用户输入！
document.write(userInput); // 可能被注入恶意脚本
4. 已关闭的文档流
如果文档已关闭（如异步脚本中），调用会报错：
// 延迟执行时文档已关闭，导致错误
setTimeout(() => document.write("错误！"), 1000);
四、使用场景（不推荐，但需了解）
- 快速测试：临时输出调试信息。
- 旧代码维护：兼容遗留系统。
- 动态脚本注入：某些广告脚本可能仍在使用。
五、现代替代方案
1. 操作 DOM 元素
// 插入内容到指定元素
document.getElementById("target").innerHTML = "<p>新内容</p>";
2. 创建新元素
const newElement = document.createElement("div");
newElement.textContent = "动态创建的内容";
document.body.appendChild(newElement);
3. 使用 textContent 防 XSS
// 安全插入纯文本
element.textContent = userInput;
总结
document.write() 因其覆盖风险和性能问题，已逐渐被现代 DOM 操作方法取代。建议优先使用 innerHTML、createElement 或框架（如 React/Vue）进行内容操作。
相关文章：
介绍（直接将内容写入HTML文档的早期方法，已逐渐被现代DOM操作方法取代）)
JavaScript document.write()介绍（直接将内容写入HTML文档的早期方法，已逐渐被现代DOM操作方法取代）
文章目录 **一、基本语法****二、核心功能**1. **在文档加载阶段写入**2. **文档加载后调用会导致覆盖****三、注意事项**1. **覆盖风险**2. **性能问题**3. **XSS 漏洞**4. **已关闭的文档流** **四、使用场景（不推荐，但需了解）****五、现代…...
mybatis-plus逆向code generator pgsql实践
mybatis-plus逆向code generator pgsql实践 环境准备重要工具的版本供参考pom依赖待逆向的SQL 配置文件CodeGenerator配置类配置类说明 环境准备 重要工具的版本 jdk1.8.0_131springboot 2.7.6mybatis-plus 3.5.7pgsql 14.15 供参考pom依赖 <?xml version"1.0&quo…...
【二叉树学习7】
力扣236.二叉树的最近公共祖先 链接: link 思路 要找p，q的公共祖先，可以从下往上遍历二叉树，而二叉树的后序遍历是天然的从下往上遍历。这题采用的是递归的方法，递归结束条件就是root为null或者rootp或者rootq就结束递归。 然后…...
LabVIEW显微镜成像偏差校准
在高精度显微镜成像中，用户常常需要通过点击图像的不同位置，让电机驱动探针移动到指定点进行观察。然而，在实际操作中，经常会遇到一个问题：当点击位于图像中心附近的点时，探针能够相对准确地定位࿱…...
什么是弧形光源
工业检测中的弧形光源是一种专门设计用于机器视觉和自动化检测的照明设备，通常用于提供均匀、高对比度的照明，以增强图像采集质量，便于检测系统识别和分析目标物体的特征。以下是关于工业检测弧形光源的详细介绍： 特点 1均匀照明： 弧形设计能够提供均匀的漫反射光，减少阴…...
Linux性能分析工具Trace使用
Linux Trace是⼀种⽤于抓取和分析系统运⾏时信息的⼯具。允许开发⼈员跟踪和分析系统的各种活动，以便深⼊了解系统的性能、⾏为和故障。下⾯是关于Linux Trace数据抓取的说明： 1. 数据抓取范围：Linux Trace可以抓取各种级别的数据，包括系统级别、进程级别和内核级别的数据。…...
【Apache Paimon】-- 作为一名小白，如何系统地学习 Apache paimon？
目录 一、整体规划 1. 了解基本概念与背景 2. 学习资料的选择 3. 学习路径与规划 4. 学习建议 5. 注意事项 6. 参考学习资料 二、详细计划 阶段 1：了解基础（1-2 周） 阶段 2：深入掌握核心功能（3-4 周…...
Vue2组件通信
目录 【props】【$emit】【Event Bus】【provide和inject】【Vuex】 【props】 父组件通过props向子组件传递数据； <!-- 父组件 --> <template><ChildComponent :message"parentMessage" /> </template> <script> import…...
HarmonyOS：使用List实现分组列表（包含粘性标题）
一、支持分组列表 在列表中支持数据的分组展示，可以使列表显示结构清晰，查找方便，从而提高使用效率。分组列表在实际应用中十分常见，如下图所示联系人列表。 联系人分组列表 在List组件中使用ListItemGroup对项目进行分组&#…...
纪念日倒数日项目的实现-【纪念时刻-时光集】
纪念日/倒数日项目的实现## 一个练手的小项目，uniappnodemysql七牛云。 在如今快节奏的生活里，大家都忙忙碌碌，那些具有特殊意义的日子一不小心就容易被遗忘。今天，想给各位分享一个“纪念日”项目。 【纪念时刻-时光集】 一…...
Kafka知识点总结
一、概述 ￥1. 推拉模式 pull（拉）模式：consumer采用从broker中主动拉取数据，不足之处是如果没有数据，消费者可能会陷入循环中，一直返回空数据。push（推）模式：…...
[AI]从零开始的llama.cpp部署与DeepSeek格式转换、量化、运行教程
一、前言 在上一次的DeepSeek的部署教程中，我们使用Ollama与LM Studio很轻松的部署了DeepSeek并且也完成了相关API的调用，如果还有不会的小伙伴请看下面的教程： DeepSeek本地部署：[AI]从零开始的DeepSeek本地部署及本地API调用教…...
#define宏与编译时定义的本质对决：从const常量到typedef的类型安全演进
目录 一、#define宏与const常量的本质差异：从文本替换到类型安全的编程抉择 1. 预处理阶段的文本替换（#define） 2. 编译时的类型安全（const） 3. 跨文件访问的限制 4. 代码示例对比 5. 最佳实践 总结表 二、类型…...
【天地图】绘制、删除点线面
使用天地图绘制、删除点线面 实现效果图地图组件完整代码使用地图组件完整代码 实现效果图 地图组件完整代码 // 天地图组件 <template><div class"map-container"><div id"mapCon"></div></div> </template><scri…...
2025年：边缘计算崛起下运维应对新架构挑战
一、引言 随着科技的飞速发展，2025年边缘计算正以前所未有的速度崛起，给运维行业带来了全新的架构挑战。在这个充满机遇与挑战的时代，美信时代公司的美信监控易运维管理软件成为运维领域应对这些挑战的有力武器。 二、边缘计算崛起带来的运维…...
【docker知识】快速找出服务器中占用内存较高的容器
本文由Markdown语法编辑器编辑完成。 1.背景： 近期在处理现场问题，观察服务器时，会遇到某些进程占用较高内存的情况。由于我们的服务，基本上都是以容器的方式在运行，因此就需要找到，到底是哪个容器&#…...
SQL联合查询
文章目录 MySQL系列：1.内连接2.外连接3.自连接4.子查询5.合并查询6.插入查询 MySQL系列： 初识MySQL，MySQL常用数据类型和表的操作，增删改查(CRUD)操作(总),数据库约束数据库设计 #班级表 drop table if exists class; create ta…...
cameralib 安装
目录 linux安装： 测试安装是否成功： linux安装： pip install githttps://github.com/isarandi/cameralib.git pip install githttps://github.com/isarandi/boxlib.git pip install githttps://github.com/isarandi/poseviz.git githttps…...
Windows软件自动化利器：pywinauto python
Pywinauto WindowsAPP UI自动化 Windows软件自动化利器：pywinauto python...
清华大学《DeepSeek：从入门到精通》
近日，清华大学新闻与传播学院新媒体研究中心元宇宙文化实验室发布了由余梦珑博士后及其团队撰写的《DeepSeek：从入门到精通》手册。这份长达104页的指南，旨在帮助用户全面掌握国产通用人工智能平台DeepSeek的核心功能与应用技巧。 DeepSeek简…...
网易易盾接入DeepSeek，数字内容安全“智”理能力全面升级
今年农历新年期间，全球AI领域再度掀起了一波革命性浪潮，国产通用大模型DeepSeek凭借其强大的多场景理解与内容生成能力迅速“出圈”，彻底改写全球人工智能产业的格局。 作为国内领先的数字内容风控服务商，网易易盾一直致力于探索…...
天童美语：观察你的生活
在孩子的认知里，世界宛如一片充满神秘色彩的未知之境，有着无尽的奥秘等待他们去探索。家长们，引导孩子用心观察世界，领略其中的美妙，这对孩子的成长进程有着极为关键的作用。贵阳天童教育相信：观察生活&…...
易仓科技ai面试
请解释PHP中的面向对象编程的基本概念，并举例说明如何在PHP中定义一个类。 回答思路：需理解类、对象、继承和多态等基本概念，并能通过实例代码展示如何定义类及其属性和方法。 . 类（Class） 类是一个封装了数据和操作…...
MySQL-SQL
1.客户端内置命令 客户端内置命令客户端独有，可能不同数据库产品的客户端内置命令存在很大差异，不像SQL命令有标准规范。 help \h ? \? 这四个命令都可以输出帮助文档查看客户端内置命令 ？（\？）“帮助”…...
基础连接已经关闭: 服务器关闭了本应保持活动状态的连接
您在进行 HTTP 请求时遇到“基础连接已经关闭: 服务器关闭了本应保持活动状态的连接”的错误，这通常与连接的保持活动（Keep-Alive）设置有关。以下是可能的原因和解决方法： 可能的原因： Keep-Alive 设置： 默…...
【React组件通讯双重视角】函数式 vs 类式开发指南
目录 前言 正文 父组件向子组件传值 函数式写法 类式写法 子组件向父组件传值 函数式写法 类式写法 兄弟组件通信 函数式写法 类式写法 跨层级通信（使用Context） 函数式写法 类式写法 进阶通讯方式（补充说明…...
开源项目Perplexica-master
一个和https://www.perplexity.ai/差不多的开源项目 大模型的key可以用groq的，免费（https://console.groq.com/keys），有速率限制 项目clone后，修改配置，项目根目录config.toml 填写对应的大模型的key就行…...
数值积分：通过复合梯形法计算
在物理学和工程学中，很多问题都可以通过数值积分来求解，特别是当我们无法得到解析解时。数值积分是通过计算积分区间内离散点的函数值来近似积分的结果。在这篇博客中，我将讨论如何使用 复合梯形法 来进行数值积分，并以一个简单的…...
DeepSeek全生态接入指南：官方通道+三大云平台
DeepSeek全生态接入指南：官方通道三大云平台 一、官方资源入口 1.1 核心交互平台 🖥️ DeepSeek官网： https://chat.deepseek.com/ （体验最新对话模型能力） 二、客户端工具 OllamaChatboxCherry StudioAnythingLLM …...
shell脚本的一些学习笔记----（三）流程控制
1.条件判断 if单条件判断 if [ 条件判断式 ] then 语句块 fi 案例1：统计根分区使用率 [rootlocalhost ~]$ vi sh/if1.sh #!/bin/bash #把根分区使用率作为变量值赋予变量rate rate$(df -h | grep "/dev/sda1" | awk {print $5}’| cut -d "%"-f…...
Docker Desktop WebAPI《1》
方法1 》》生成 的文档不要动， 》》执行 Container（Dockerfile） 会生成镜像文件和容器 》》生成的镜像和容器 在 Docker Desktop 中可以查看 用VS 的 Container Dockerfile 调试 但把这个调试工工具 停止，WebAPi就不能访问了 …...
Linux驱动层学习：LED 驱动开发
前置知识： 1、地址映射 MMU 全称叫做 Memory Manage Unit，也就是内存管理单元。 MMU 主要完成的功能如下： ①、完成虚拟空间到物理空间的映射。 ②、内存保护，设置存储器的访问权限，设置虚拟存储空间的缓冲特性。 第…...
全面解析鸿蒙（HarmonyOS）开发：从入门到实战，构建万物互联新时代
文章目录 引言 一、鸿蒙操作系统概述二、鸿蒙开发环境搭建三、鸿蒙核心开发技术1. **ArkUI框架**2. **分布式能力开发**3. **原子化服务与元服务** 四、实战案例：构建分布式音乐播放器五、鸿蒙开发工具与调试技巧六、鸿蒙生态与未来展望结语 引言 随着万物互联时代…...
zyNo.23
SQL注入漏洞 1.SQL语句基础知识 一个数据库由多个表空间组成，sql注入关系到关系型数据库，常见的关系型数据库有MySQL,Postgres,SQLServer,Oracle等 以Mysql为例，输入 mysql-u用户名-p密码 即可登录到MySQL交互式命令行界面。 既然是…...
调用DeepSeek API接口：实现智能数据挖掘与分析
在当今数据驱动的时代，企业和开发者越来越依赖高效的数据挖掘与分析工具来获取有价值的洞察。DeepSeek作为一款先进的智能数据挖掘平台，提供了强大的API接口，帮助用户轻松集成其功能到自己的应用中。本文将详细介绍如何调用DeepSeek API接口&…...
【Linux】Ubuntu Linux 系统——Node.js 开发环境
ℹ️大家好，我是练小杰，今天星期五了，同时也是2025年的情人节，今晚又是一个人的举个爪子！！ 🙂 本文是有关Linux 操作系统中 Node.js 开发环境基础知识，后续我将添加更多相关知识噢&a…...
Redis7——基础篇（一）
前言：此篇文章系本人学习过程中记录下来的笔记，里面难免会有不少欠缺的地方，诚心期待大家多多给予指教。 基础篇： Redis（一） 一、Redis定义 官网地址：Redis - The Real-time Data Platform R…...
MySQL查看存储过程和存储函数
【图书推荐】《MySQL 9从入门到性能优化（视频教学版）》-CSDN博客 《MySQL 9从入门到性能优化（视频教学版）（数据库技术丛书）》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) MySQL9数据库技术_夏天又到了…...
js实现点击音频实现播放功能
目录 1. HTML 部分：音频播放控件 2. CSS 部分：样式设置 3. JavaScript 部分：音频控制 播放和暂停音频： 倒计时更新： 播放结束后自动暂停： 4. 总结： 完整代码： 今天通过 HTML…...
Ubuntu安装docker：docker-desktop : 依赖: docker-ce-cli 但无法安装它、无法定位软件包 docker-ce-cli
具体错误 sudo apt-get install ./docker-desktop-amd64.deb [sudo] password for weiyu: 正在读取软件包列表... 完成 正在分析软件包的依赖关系树... 完成 正在读取状态信息... 完成 注意，选中 docker-desktop 而非 ./docker-desktop-amd64.de…...
免费deepseek的API获取教程及将API接入word或WPS中
免费deepseek的API获取教程: 1 https://cloud.siliconflow.cn/中注册时填写邀请码：GAejkK6X即可获取2000 万 Tokens; 2 按照图中步骤进行操作 将API接入word或WPS中 1 打开一个word，文件-选项-自定义功能区-勾选开发工具-左侧的信任中心-信任中心设置…...
华为交换机堆叠配置
华为交换机堆叠（Stack）技术是一种将多台物理交换机虚拟化为单一逻辑设备的高可靠性解决方案，可简化网络管理、提升带宽利用率并增强冗余能力。 一、堆叠的核心概念 堆叠系统组成：主交换机（Master）…...
基于Java SpringBoot以及vue前后端分离的旅游景区网站系统设计与实现
基于Java SpringBoot以及vue前后端分离的旅游景区网站系统设计与实现 本项目是一款基于Spring Boot和Vue.js开发的旅游景区管理系统，前端合后端的架构，支持用户在线浏览景区信息、预订门票，并提供完善的后台管理功能，包括订单管理…...
DeepSeek教unity------MessagePack-04
Union 联合 MessagePack for C# 支持序列化接口类型和抽象类类型的对象。它的行为类似于 XmlInclude 或 ProtoInclude。在 MessagePack for C# 中，这些被称为Union。只有接口和抽象类可以被 Union 属性注解。需要唯一的联合键。 /******************************…...
侯捷 C++ 课程学习笔记：C++ 新标准 11/14 的革新与实战应用
在侯捷老师的 C 系列课程中，《C 新标准 11/14》这门课程让我对现代 C 编程有了全新的认识。C11 和 C14 是 C 语言发展史上的重要里程碑，它们引入了大量新特性，极大地提升了语言的表达能力和开发效率。侯捷老师通过深入浅出的讲解和丰富的实战…...
MATLAB图像处理：Sobel、Roberts、Canny等边缘检测算子
边缘是图像中像素值剧烈变化的区域，反映了目标的轮廓、纹理等关键信息。边缘检测是图像分割、目标识别等任务的基础。本文将系统解析 六种经典边缘检测算子 的数学原理、实现方法及适用场景，并给出完整的MATLAB代码示例和对比分析。 1. 边缘检测基础 1…...
Python Pandas（7）：Pandas 数据清洗
数据清洗是对一些没有用的数据进行处理的过程。很多数据集存在数据缺失、数据格式错误、错误数据或重复数据的情况，如果要使数据分析更加准确，就需要对这些没有用的数据进行处理。数据清洗与预处理的常见步骤： 缺失值处理：识别并…...
基于javaweb的SpringBootoa办公自动化系统设计和实现(源码+文档+部署讲解）
🎬 秋野酱：《个人主页》 🔥 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 运行环境开发工具适用功能说明部分代码展示 运行环境 Java≥8、MySQL≥5.7 开发工具 eclipse/idea/myeclipse/sts等均可配置运行…...
算法08-递归调用转为循环的通用方法
前导：问题引入 在Python中，递归调用过多会导致“递归深度过深”的错误，通常是因为递归没有正确终止条件或者递归层次太深。 这种错误通常会导致程序抛出 RecursionError 异常。 Python默认的递归深度限制大约是1000层（可以通过sys.getrecursionlimit()查看）。 修正方式…...
+copilot进行QtWidgetsApplication源码解析)
[qt5学习笔记]用vs2022(msvc2017)+copilot进行QtWidgetsApplication源码解析
一直没深入了解qt，又一段时间没写qt，重新捡起来。 开发环境 本地vs2022(msvc2017, v14.30)先升级到最新版本，方便使用copilot。 参考 VS2022QT5环境搭建 下载 qt5.14.2 用vs的qt插件设置qt5.14.2x86路径，x64版本未安装。 创建一…...