outerHTML/innerHTML,outerText/innerText,textContent区分

于 2023-02-04 14:07:05 发布
阅读量159 收藏
点赞数
文章标签： html javascript 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46786153/article/details/128879426
版权

outerHTML/innerHTML

outerHTML

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/outerHTML

element DOM 接口的outerHTML属性获取描述元素（包括其后代）的序列化 HTML 片段。

它也可以设置为用从给定字符串解析的节点替换元素。

要仅获取元素内容的 HTML 表示形式或替换元素的内容，请使用 innerHTML 属性

innerHTML

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML

Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。

备注： 如果一个 <div>, <span>, 或 <noembed> 节点有一个文本子节点，该节点包含字符 (&), (<), 或 (>), innerHTML 将这些字符分别返回为 &amp;, &lt; 和 &gt;。使用Node.textContent 可获取一个这些文本节点内容的正确副本。

HTML语法表示会对产生歧义的文本内容字符做转义处理

用outerHTML/innerHTML替换内容

可以看到outHTML/innerHTML都有基于字符串模版解析替换元素内容的作用

如下直接查看网页源码，将 HTML 转换成原始文本，将其包裹在 <pre> 元素中

document.documentElement.innerHTML =
    "<pre>"+
    document.documentElement.innerHTML.replace(/</g,"&lt;") 
    +"</pre>";

innerHTML 设置一个值的时候到底发生了什么？用户代理按照以下步骤：

  1. 给定的值被解析为 HTML 或者 XML（取决于文档类型），结果就是 DocumentFragment 对象代表元素新设置的 DOM 节点。

  1. 如果元素内容被替换成 <template> 元素，<template> 元素的 content 属性会被替换为步骤 1 中创建的新的 DocumentFragment。

  1. 对于其他所有元素，元素的内容都被替换为新的 DocumentFragment 节点。

用outerHTML/innerHTML替换内容存在的安全问题

HTML 5 中指定不执行由 innerHTML 插入的 <script> 标签。

然而，有很多不依赖 <script> 标签去执行 JavaScript 的方式。所以当你使用innerHTML 去设置你无法控制的字符串时，这仍然是一个安全问题。例如：

const name ="<img src='x' onerror='alert(1)'>";
el.innerHTML = name;// shows the alert

基于这个原因，当插入纯文本时，建议不要使用 innerHTML 。取而代之的是使用 Node.textContent ，它不会把给定的内容解析为 HTML，它仅仅是将原始文本插入给定的位置。

案例：基于innerHTML写一个鼠标事件记录器并展示在网页中

https://codepen.io/doudoumao/pen/ZEjwxVd

outerText/innerText

outerText

**HTMLElement.outerText**是一个非标准的属性。作为一个获得器，它返回与HTMLElement.innerText一致的值。作为一个设置器，它将删除当前节点并将其替换为给定的文本。

innerText

HTMLElement.innerText 属性表示一个节点及其后代的“渲染”文本内容

备注： innerText 很容易与Node.textContent混淆，但这两个属性间实际上有很重要的区别。大体来说，innerText 可操作已被渲染的内容，而 textContent 则不会。

输出值

一段 DOMString 表示一个元素中已被渲染的内容。如果元素自身没有 被渲染 (e.g 被从文档中删除或没有在视图中显示), 这时返回值与 Node.textContent 属性相同。

示例

对比了 innerText 和 Node.textContent

https://codepen.io/doudoumao/pen/ZEjwoYE

textContent

Node.textContent

Node 接口的 textContent 属性表示一个节点及其后代的文本内容。

备注： textContent 和 HTMLElement.innerText 容易混淆，但这两个属性在重要方面有不同之处 。

取值情况：

  • 如果节点是一个 document，或者一个 DOCTYPE（<!DOCTYPE html>防止切换到怪异模式） ，则 textContent 返回 null。

备注： 如果你要获取整个文档的文本以及 CDATA data ，可以使用 document.documentElement.textContent。

备注： CDATASection 接口用于表示 CDATA 片段（CDATA section）。在 XML 中，CDATA 可以直接包含未经转义的文本。比如 < 和 &，只要位于 CDATA 片段中，它们就不需要被转义，保持原样就可以了。

<foo>这是一个CDATA section: <![CDATA[ < > & ]]> 其中包含了一些没有转义的字符。 </foo>

CDATA 片段不应该在 HTML 中被使用；它只在 XML 中有效。

text node 文本节点

Document.createTextNode() 创建一个新的文本节点。这个方法可以用来转义 HTML 字符。

https://codepen.io/doudoumao/pen/wvxNjLw

  • 对于其他节点类型，textContent 将所有子节点的 textContent 合并后返回，除了注释和 processing instructions。（如果该节点没有子节点的话，返回一个空字符串。）

总结下就是顶层节点返回null，比较特殊的单个节点返回本身文本内容，其它节点遍历以后返回

与 innerText 的区别

  • textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，然而 innerText 只展示给人看的元素。

  • textContent 会返回节点中的每一个元素。相反，innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，

  • 此外，由于 innerText 受 CSS 样式的影响，它会触发回流（ reflow ）去确保是最新的计算样式。（回流在计算上可能会非常昂贵，因此应尽可能避免。）

https://codepen.io/doudoumao/pen/ZEjwoYE

与 innerHTML 的区别

正如其名称，Element.innerHTML 返回 HTML。通常，为了在元素中检索或写入文本，人们使用 innerHTML。但是，textContent 通常具有更好的性能，因为文本不会被解析为 HTML。

此外，使用 textContent 可以防止 XSS 攻击。

写文本contentText优先

weixin_46786153
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个用于操作HTML元素内容的属性，它们各自有不同的功能和用途。 1. innerHTML： - innerHTML允许我们获取或设置一个元素内部的HTML内容。当我们设置...
HTML学习笔记（三）css选择器
qq_45288211的博客
08-23 269
一、css的引入方式 内联样式： 内联样式表就是把css代码直接写在现有的HTML标签中 缺点：样式与结构冗余 优点：优先级较高 <div style="color:red">设置文字的颜色为红色</div> 样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。 这种样式只会对当前标签起作用，在测试的时候可以使用，不能对样式进行复用，不方便后期维护，不推荐使用 内部样式表 缺点：样式的复
细说innerHTML、innerText、outerHTML、outerText、textContent的区别
lee_slly的博客
07-03 8758
简析 这几个属性都是原生 JS 用来获取和设置 DOM 节点的内容的，但是获取的内容格式和范围却有一些不同。 对比一 先上一段代码 <div id="test"> <span style="color:red">test1</span> test2 </div> var elementNode = document.getElementById('test'); innerHTML 获取或设置从对象的起始位置到终止位置的全.
自定义属性，innerHTML,outerHTML,dom节点的获取，className,tagName,更改或者是获取css属性...
a123b3211的博客
09-08 259
01.自定义属性 1.自定义属性： 作用：保存数据 通用的自定义属性的前缀 data-属性="属性值" 注：自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribute(); 2.自定义属性的获取 元素.getAttribute('data-url'); 3.设置 节点.setAttribute('属性名称','修改后的属性值')； (修改后的属性值...
javascript学习笔记——DOM扩展，InnerHTML属性、outerHTML属性、contains()方法
ass_ace
08-05 2616
1.querySelector()方法 接收css选择符，返回与该模式匹配的第一个元素，如果没有匹配元素则返回null； 通过document类型调用该方法则会在文档元素的范围内查找匹配元素； 通过Element类型调用该方法则则只会在该元素后代元素范围内查找匹配元素； document.querySelector("#myDiv"); 2.querySelectorAll()方法...
innerHTML,outerHTML,innerText,outerText的用法及区别解析
09-04
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解
09-03
JavaScript中的innerHTML、outerHTML、textContent和innerText属性是处理HTML元素内容和文本的四个关键属性，它们各有特点，适用场景也有所不同。以下是对这些属性的详细解释： 1. innerHTML属性： innerHTML属性...
innerHTML、outerHTML、innerText、outerText的用法与区别
05-09
在示例中，我们可以看到，innerHTML、outerHTML、innerText、outerText的用法和区别。innerHTML和outerHTML用于获取或设置HTML元素的内容，而innerText和outerText用于获取或设置HTML元素的文本内容。 outerHTML比...
innerHTML，outerHTML,innerTEXT三者之间的区别
10-31
### innerHTML，outerHTML,innerTEXT三者之间的区别 在前端开发中，处理DOM（文档对象模型）元素时，我们经常需要操作元素的内容或者结构。`innerHTML`、`outerHTML` 和 `innerText` 这三个属性是JavaScript中最...
innerHTML与outerHTML 的区别？
责任与担当
07-25 748
1.innerHTML <body> <p>你好</p> <div id="test"><h5>就是喜欢你</h5></div> <script type="text/javascript"> var hj=document.getElementById("test").innerHT...
动态修改元素内容 innerText、innerHTML、outerText、outerHTML
韩世雷 程序员专栏
07-18 6821
中国风 function IT(){ f1.innerText="innerText"; } function IH(){ f1.innerHTML="innerHTML"; } function OT(){ f1.outerText="outerText"; } function OH(){ d1.outerHTML="outerHTML"; }
JavaScript中innerHTML、outerHTML、innerText、outerText的用法与区别认识
johnchow2017的博客
04-25 3022
2017百度前端技术学院（js任务一） 一、JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？ 在JS中很容易将以上几者记错弄混，在网上找了解释也很抽象，如以下： innerHTML 设置或获取位于对象起始和结束标签内的 HTML  innerText 设置或获取位于对象起始和结束标签内的文
JS的Document属性和方法
程宇寒
03-19 531
Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType 返回此节点的数据类型 Definition 以DTD或XML模式给出的节点的定义(只读) Doctype 指定文档类型节点(只读) documentElement 返回文档的根元素(可读写) firstChild 返回当前节点的第一个子节点(只读) Implementation ...
JS中innerHTML、outerHTML、innerText、outerText的用法与区别
itmyhome的专栏
01-17 7800
1、功能说明:innerHTML 设置或获取位于对象起始和结束标签内的 HTML innerText 设置或获取位于对象起始和结束标签内的文本 outerHTML 设置或获取对象及其内容的HTML形式 outerText 设置(包括标签)或获取(不包括标签)对象的文本 2、示例页面有如下代码： span1 span2 var innerHTML = document.getElemen
iOS 中JavaScript交互 Document对象详解
wang_Bo_JustOne的博客
11-14 1171
在浏览器中，与用户进行数据交换都是通过客户端的javascript代码来实现的，而完成这些交互工作大多数是document对象及其部件进行的，因此document对象是一个比较重要的对象。 document对象概述 document对象是文档的根节点，window.document属性就指向这个对象。也就是说，只要浏览器开始载入HTML文档，这个对象就开始存在了，可以直接调用。
outerText、innerText 、outerHTML、innerHTML
fox123871的专栏
08-16 2329
首先，看我们的html定义    innerHTML,innerText,outerHTML,outeterText JS定义： function i
js中获取html元素之document.documentElement
热门推荐
韦_恩的博客
05-18 1万+
document.documentElement Document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）。 对于任何非空 HTML 文档，调用 document.documentElement 总是会返回一个 <html> 元素，且它一定是该文档的根元素。借助这个只读属性，能方便地获取到任意文档的根元素。 参考文档 html中document.body 与 document.d
InnerHtml outerHtml区别
最新发布
06-08
innerHtml和outerHtml都是JavaScript中DOM节点对象的属性。 innerHtml是用来获取或设置某个元素节点的所有子节点（包括文本节点）的HTML内容，但不包括该元素本身的HTML标签。 outerHtml是用来获取或设置某个元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值