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疑惑点整理(三)相关推荐
- Auto.js 全命令整理(三) 输出专题
Auto.js 全命令整理(三) 输出专题 目录 Auto.js 全命令整理(三) 输出专题 Console Toast Dialogs 末 各种输出方法,让你了解程序现在在干什么- Console ...
- DOM注册事件的三种方式~满满的干货哦
Hello ~ 下面是对DOM注册事件的三种方式,希望可以帮助到有需要的小伙伴 注册事件就是将JavaScript函数与指定的事件相关联. 当该事件被触发时,绑定的函数会被调用. HTML页面元素提供 ...
- Golang面试整理 三 简历如何书写
Golang面试整理 三 一.CRUD项目简历如何写,以及如何应对面试 一.CRUD项目简历如何写,以及如何应对面试 1.扬长避短,找一个擅长的点,重点突出,以此掩盖项目的不足: 2.将技能亮点写到个 ...
- CSS 知识整理(三) 样式
CSS 知识整理(三) 样式 目录 CSS 知识整理(三) 样式 一.字体 二.文本 三.列表 四.背景 一.字体 字体:font-famliy 字号:font-size 粗细:font-weig ...
- 外包项目开发课程整理三:Selfsourcing(自主开发)及 Prototyping(打造原型)
外包项目开发课程整理三:Selfsourcing(自主开发)及 Prototyping(打造原型) 课程整体内容: Insourcing and the SDLC(内包及系统开发生命周期):定义传统 ...
- HTML5 Audio标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- JQuery对DOM的操作【三】
一.jQuery的DOM操作方法 所有方法的特点:既可以设置属性,又可以获取属性 二. html代码/文本/值:html().text().val() 1. 语法: 1) html() js对象中的i ...
- ArcGIS使用字段计算器python脚本整理三规合一图斑
最近试着使用字段计算器内的python脚本整理图斑,蹒跚学步,做下记录. 1.用地代码与名称转换 1.1城规用地代码CGYDDM转用地名称CGYDMC 做一个python字典再索引即可(码齐这些分类还 ...
- DOM跨域的三种解决方案:document.domain、window.name、window.postMessage
文章目录 同域访问 document.domain 相同二级域名之间的跨域 相同域名,不同端口之间的跨域 window.name window.postMessage 同域访问 浏览本篇文章之前,需要 ...
最新文章
- paloalto防火墙版本升级
- Opensetack + Kubernetes(K8S)黄金搭档漫谈
- 最常见的显示设置和快捷键
- 12 Essential Bootstrap Tools for Web Designers
- __try,__except,__finally,__leave
- sql profiler_这是SQL Profiler的结尾吗?
- 【BZOJ 4551】【TJOI2016】【HEOI2016】树
- 分享一款影视源码_爱客影院网站3.5.6版本
- Android 如何反编译apk查看源码
- 计算方法——C语言实现——LU分解法求解非线性方程
- 有人还原出了历史上的皇帝,朱元璋居然还挺帅?
- 知识共享,让企业“活”起来
- FrontEnd笔记 -- Vue 核心
- 商城项目解析(前端页面知识,用户如何访问服务器,hosts的修改,nginx)
- General Sultan UVA - 11604(建图暴力)
- 百度APP“看听模式”:“AI主播”借道信息流全面落地?
- 神经网络与深度学习期末考试满分过题库!
- 数据结构与算法之线性表(超详细顺序表、链表)
- 张俊林:当前炼制“大语言模型”的两个现象
- 基于单片机的智能健康监护仪的设计(心电、心音、体温、脉搏、血压采集)
热门文章
- 使用Excel公式,获取 当前 Excel 的Sheet页 的 名字
- eclipse 启动服务后,部署的文件一直是旧的文件的原因分析
- 实现随着 下拉菜单中 选中值的变化 周边的值也也跟着变化。(使用【 VLOOKUP 】 函数)
- Eclipse 中 SVN 的设置。
- linux 64 mysql下载官网_Linux下安装MySQL5.7
- 【Oracle】Rman简介
- 解决RecyclerView瀑布流效果结合Glide使用时图片变形的问题
- webpack+vue解决前端跨域问题
- 解决bootstrap模态框居中问题
- tolua#是Unity静态绑定lua的一个解决方案