码迷,mamicode.com
首页 > 其他好文 > 详细

DOM疑惑点整理(三)

时间:2019-11-26 22:55:34      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:license   改变   asc   black   代码   元素   标签   整理   总结   

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疑惑点整理(三)

标签:license   改变   asc   black   代码   元素   标签   整理   总结   

原文地址:https://www.cnblogs.com/homehtml/p/11938670.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!