innerHTML和outerHTML

先说一个几乎众所周知的,innerHTML和outerHTML中的内容都会被解析为DOM子树,其二就是,

<div id="txt" style="width: 100px;height: 100px;border: 1px solid black;"></div>
<script type="text/javascript">
let txt = document.getElementById("txt");
txt.innerHTML = "<p>txt</p>";
</script>

执行效果等于:

<div id="txt" style="width: 100px;height: 100px;border: 1px solid black;">
<p>txt</p>
</div>

而outerHTML的执行,

<div id="txt" style="width: 100px;height: 100px;border: 1px solid black;"></div>
<script type="text/javascript">
let txt = document.getElementById("txt");
txt.outerHTML = "<p>txt</p>";
</script>

执行效果等于:

<p>txt</p>

就是原本的div消失了,调用outer HTML的整个节点全部被替换了。但是该div还存在,并没有被删除,可以通过console.log(txt)看到它。
好的,这些是众所周知的。
在使用innerHTML或者outerHTML过程中,会有一个小细节,有关script的,但并不是script在ie8-的那个无作用域的问题(这个也是众所周知的)。

小细节:

<script type="text/javascript">
let txt = document.getElementById("txt");
txt.innerHTML = "<div id=\"txt1\">1</div>";
txt.innerHTML = "<script id=\"txt2\">var a = 1;</script>";
</script>

这样的代码,在浏览器运行会出错,出错处在第四行,修改第四行为如下,就不会报错:

txt.innerHTML = "<script id=\"txt2\">var a = 1;<\/script>";

需要你加一个转义符号,反观第三行结尾不需要转义符也不会出错。
原因是浏览器解析时遇到</script>就会认为是结束标签就会和第一行的<script>相照应,这个原因应该也是众所周知吧,值得注意的就是记住,用innerHTML的时候,如果有</script>,记得转义符。

innerText和outerText

两者最大区别就是是否会改变调用它们的节点自身,类似上面innerHTML与outerHTML的其二中所描述。
outerText并未写入规范,不建议使用,而且会导致调用它的节点自身消失。
innerText与textContent区别总结:
①<script>和<style>标签的内容,innerText会忽略,后者不会。
②如果innerText中有css内容,就会触发回流,页面重绘(浏览器会根据元素的新属性重新绘制,使元素呈现新的外观),后者不会
③innerText不返回隐藏样式,后者不懂,因此后者全部返回
④ie<=11中,innerText会使得被修改的原本的文本节点,全部被销毁。
⑤两者可能因为浏览器不同,输出的文本格式略有差别

DOM疑惑点整理(三)的更多相关文章

  1. DOM操作指令整理

    DOM操作指令整理: (1) 创建新节点: createDocumentFragment() 创建一个DOM片段 creatElement() 创建一个具体的元素 creatTextNode() 创建 ...

  2. js dom element 属性整理(原创)

    最近去几家公司面试,发现大多数时候面试的内容考的都是原生的js语法和属性,所以我决心整理一下原生的dom元素的属性. 首先,我我们需要获取一个element元素 <li id="2&q ...

  3. js的dom操作(整理)(转)

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  4. 深入理解DOM节点类型第三篇——注释节点和文档类型节点

    × 目录 [1]注释节点 [2]文档类型 前面的话 把注释节点和文档类型节点放在一起是因为IE8-浏览器的一个bug.IE8-浏览器将标签名为"!"的元素视作注释节点,所以文档声明 ...

  5. Python模块整理(三):子进程模块subprocess

    文章 原始出处 http://ipseek.blog.51cto.com/1041109/807513. 本来收集整理网络上相关资料后整理: 从python2.4版本开始,可以用subprocess这 ...

  6. CSS3 Flex布局整理(三)-项目属性

    一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...

  7. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  8. DOM基础知识整理

    --<JavaScript高级程序设计>Chapter10学习笔记 一.节点层次 1.Node类型 1)(Node).nodeType属性 节点nodeType属性有12种. 检测node ...

  9. SQL Server-简单查询语句,疑惑篇(三)

    前言 对于一些原理性文章园中已有大量的文章尤其是关于索引这一块,我也是花费大量时间去学习,对于了解索引原理对于后续理解查询计划和性能调优有很大的帮助,而我们只是一些内容进行概括和总结,这一节我们开始正 ...

随机推荐

  1. 重拾SQL——从无到有

    2016.10.22 因为工作需要,在这里提前重拾sql. 0.创建并选择数据库 mysql> SHOW DATABASES; +--------------------+ | Database ...

  2. unity 编辑器教程

    教程1:https://blog.csdn.net/u010019717/article/details/80300136 教程2:https://blog.csdn.net/liqiangeasts ...

  3. 应用安全-Web安全-子域名/相关域名

    技巧 DNS解析记录 主站获取 单点登录接口 crossdomain.xml IP反查 通过HTTPS证书收集 DNS域传送搜集 联系人信息/邮箱反查域名 x-dns-prefetch-control ...

  4. Python基础-7.1字符串的格式化

    字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-310 ...

  5. SpringBoot 使用Mybatis+MySql

    pom配置 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http: ...

  6. python之getopt

    getopt可以分析输入的参数,根据不同的参数输入不同的命令 getopt.getopt( [命令行参数列表], "短选项", "长选项列表" ) getopt ...

  7. 加密算法:DES、AES等

    指标:运算速度.安全性.资源消耗 对称加密算法(加解密密钥相同): 非对称算法(加密密钥和解密密钥不同): 散列算法比较: 对称与非对称算法比较: 算法选择(从性能和安全性综合) 对称加密: AES( ...

  8. docker网络 macvlan

    docker 还开发了另一个支持跨主机容器网络的 driver:macvlan. macvlan 本身是 linxu kernel 模块,其功能是允许在同一个物理网卡上配置多个 MAC 地址,即多个 ...

  9. python 更快地判断数字的奇数还是偶数

    使用 按位与运算符(&) 将能更加快速地判断一个整数是奇数还是偶数 使用举例如下: def check_number(n): if n & 1: return '奇数' else: r ...

  10. Manjaro美化 配置教程

    Manjaro Linux的美化 切换源 sudo vi /etc/pacman.conf 加入arch源 [archlinuxcn] SigLevel = Optional TrustedOnly ...