<p>元素与文本节点的区别及二者各自的优缺点是什么？

先明确核心定义：文本节点是DOM中承载纯文本内容的基础节点，本身没有标签包裹，也不带有任何语义；<p>是HTML规范定义的块级语义元素，专门用于标记段落内容，其内部通常会包含1个或多个文本节点，也可嵌套行内元素。

优点 #

• 自带段落语义，浏览器、屏幕阅读器、搜索引擎都可识别为独立段落，可访问性和SEO表现更好
• 有默认的上下外边距样式，无需额外写CSS即可实现常规段落间距，基础排版更省心
• 作为块级元素默认独占一行，符合常规文本排版的段落分隔逻辑
• 支持直接添加类名、ID、自定义属性，也可绑定DOM事件，还能嵌套<a>、<em>、<strong>等行内元素做内容格式扩展，灵活性更高
• 可通过CSS直接调整宽高、边距、对齐方式等块级属性，排版定制更方便

缺点 #

• 自带默认样式，如果要做极简自定义排版，需要额外写CSS重置上下边距，会增加少量代码量
• 作为块级元素默认不能和其他行内/块级元素排在同一行，需要修改display属性才能调整布局表现
• 语义有明确约束，仅适合标记段落内容，用来承载非段落类文本会导致语义错误，影响可访问性

优点 #

• 体量最轻，没有额外的标签包裹，代码体积最小，也不会增加DOM树的层级复杂度
• 没有默认样式，所有样式完全继承父元素的属性，不需要额外做样式重置
• 无语义约束，任何需要纯文本的场景都可以使用
• JS操作性能更高，直接修改文本节点的nodeValue比修改元素的innerHTML性能更好，同时不会有XSS注入风险

缺点 #

• 无自带语义，辅助工具和搜索引擎无法识别文本的功能和定位，可访问性、SEO表现较差
• 不能直接添加属性、绑定事件，如果要实现交互或者特殊样式，必须额外包裹一层元素
• 没有独立的样式上下文，所有样式完全继承父元素，无法单独调整这段文本的排版属性
• 连续的空白文本节点会被浏览器自动合并，部分场景下还会产生多余的间距，排版控制难度更高
• 无法嵌套其他行内元素做格式标注，比如要给部分文本加粗、加链接，只能拆分文本节点或者额外套元素实现

内容的提问来源于stack exchange，提问作者gdor11