DOM疑惑点整理(三)
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疑惑点整理(三)的更多相关文章
- DOM操作指令整理
DOM操作指令整理: (1) 创建新节点: createDocumentFragment() 创建一个DOM片段 creatElement() 创建一个具体的元素 creatTextNode() 创建 ...
- js dom element 属性整理(原创)
最近去几家公司面试,发现大多数时候面试的内容考的都是原生的js语法和属性,所以我决心整理一下原生的dom元素的属性. 首先,我我们需要获取一个element元素 <li id="2&q ...
- js的dom操作(整理)(转)
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- 深入理解DOM节点类型第三篇——注释节点和文档类型节点
× 目录 [1]注释节点 [2]文档类型 前面的话 把注释节点和文档类型节点放在一起是因为IE8-浏览器的一个bug.IE8-浏览器将标签名为"!"的元素视作注释节点,所以文档声明 ...
- Python模块整理(三):子进程模块subprocess
文章 原始出处 http://ipseek.blog.51cto.com/1041109/807513. 本来收集整理网络上相关资料后整理: 从python2.4版本开始,可以用subprocess这 ...
- CSS3 Flex布局整理(三)-项目属性
一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...
- HTML5 <Audio>标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- DOM基础知识整理
--<JavaScript高级程序设计>Chapter10学习笔记 一.节点层次 1.Node类型 1)(Node).nodeType属性 节点nodeType属性有12种. 检测node ...
- SQL Server-简单查询语句,疑惑篇(三)
前言 对于一些原理性文章园中已有大量的文章尤其是关于索引这一块,我也是花费大量时间去学习,对于了解索引原理对于后续理解查询计划和性能调优有很大的帮助,而我们只是一些内容进行概括和总结,这一节我们开始正 ...
随机推荐
- jdbcTemplate和namedParameterJdbcTemplate
jdbcTemplatejdbcTemplate配置<!-- 注入jdbcTemplate 官方工具包 --> <bean id="jdbc" class=&qu ...
- 腾讯重磅开源分布式NoSQL存储系统DCache
当你在电商平台秒杀商品或者在社交网络刷热门话题的时候,可以很明显感受到当前网络数据流量的恐怖,几十万商品刚开抢,一秒都不到就售罄:哪个大明星出轨的消息一出现,瞬间阅读与转发次数可以达到上亿.作为终端用 ...
- java Iterator Iterable Collection AbstractCollection Map关系
java.lang Interface Iterable<T> 实现该接口就可以使用for-each循环. java.util Interface Iterator<E> ...
- TCP 和 UDP 的区别---还有一个UTP一
面试的时候会经常问到这些问题,所以要对比了解一下他们之间的差别,能讲出个所以然来.多积累多总结,懵逼中... TCP 和 UDP TCP与UDP基本区别 : 1.基于连接与无连接 2.TCP要求系统资 ...
- Apache服务(基于IP地址,主机名,端口号)
安装Apache服务程序 需要注意apache服务程序的软件包名称叫做httpd,因此直接执行yum install apache则是错误的. [root@liuxuanke-hbza ~]# yum ...
- es6基本介绍及使用
1.什么是es6 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应 ...
- css中的居中的方法
一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...
- 树莓派上编译安装python3.6
1.更新树莓派系统 sudo apt-get update sudo apt-get upgrade -y 2.安装python依赖环境 sudo apt-get install build-esse ...
- C# 委托和事件 实现窗体间的通信
例子 : 点击form1上的按钮打开form2窗口,在form2窗体中的文本框中输入一个值后,在点击form2窗体中按钮,在form2中的文本框中输入的值也会在form1中的文本框中出现. form1 ...
- TP框架中的M、D、C、I、A、S方法
M方法 M实例化参数是数据库的表名 //使用M方法实例化$User = M('User');//和用法$User = new /Think/Model ('User');等效//执行其他的数据操作$U ...