document.write() 和(对象名).innerText=" " / innerHTML=""对于当前文档流的影响小结

最新推荐文章于 2022-11-04 11:33:06 发布

Liswi

最新推荐文章于 2022-11-04 11:33:06 发布

阅读量308

点赞数

分类专栏： JavaScrip散碎记文章标签：对象函数

本文链接：https://blog.csdn.net/lishiweiaa/article/details/70176007

版权

JavaScrip散碎记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

document.write() 的影响时机
当document.write()函数和一般文档流同时加载时,可以正常输出,不影响其他文档流,下方例1代码,其中 “我只是一个文档流” \ “我是跟第一个一起来的”\ 以及标签 \都是第一时间在统一文档流内加再进来的,此时它们互不影响,且按解析顺序排列,浏览器效果如图例[1]-1
这里写图片描述
图例[1]-1

重点内容注意到我的js代码中还为按钮绑定了一个事件 onclick 当点击该按钮时会进行等号右端函数大括号内定义的操作,在这里我定义的是 document.write() , 大家注意,此处的语句并不在文档流第一次加载时进行解析,而是在用户点击按钮时才进行解析,即输出

document.write()内的内容. 点击后的效果图如下
这里写图片描述

                      图  例[1]-2

此时大家注意到,先前加载的文档没有了已经没有了,这就是 document.write() 清除文档流的时机;

例[1]:

       <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h>我只是一个文档流</h>
        <button>点我</button><br />

        <script type="text/javascript">
            document.write("我是跟第一个一起来的");
            var btn=document.getElementsByTagName("button")[0];
            btn.onclick = function (){
            document.write("我是最新的文档流");
            }
        </script>
    </body>
</html>

如何解决呢?
我们可不可以把write()的范围限制在一个小圈子里,使它不对其他的元素造成影响呢?我们来试试:
错误示范[1]:

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h>我只是一个文档流</h>
        <div></div>
        <button>点我</button><br />

        <script type="text/javascript">
        var div1 = document.getElementsByTagName("div")[0];
            document.innerHTML="我是跟第一个一起来的";
            var btn=document.getElementsByTagName("button")[0];
            btn.onclick = function (){
            div1.innerHTML="我是最新的文档流";
            }
        </script>
    </body>
</html>

这个代码是有错的,document.write() 并不可以更换对象,只能用document 对象;
这种情况下,就不能再用document.write()了,这时候就需要下面的主角: innerText/innerHTML

document.innerText=” ” 的影响时机
每个加载的文档流都会成为document对象,直接用document.innerText的话并不会加载出内容,所以此处我们要用一个具体的对象 element.innerText=”” ,如例[2] 代码如下:

例[2]:

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h>我只是一个文档流</h>
        <div></div>
        <button>点我</button><br />

        <script type="text/javascript">
        var div1 = document.getElementsByTagName("div")[0];
            div1.innerText="我是跟第一个一起来的";
            var btn=document.getElementsByTagName("button")[0];
            btn.onclick = function (){
            div1.innerText="我是最新的文档流";
            }
        </script>
    </body>
</html>

当文档流第一次加载时,效果是下面这样的:
这里写图片描述

               图 例[2]-1

可以看出 div1.innerText=”我是跟第一个一起来的”已经输出了.接下来和上面的 document.write()一样,我们点击按钮触发里面的事件,触发后的效果图如下:
这里写图片描述

               图 例[2]-2

可以看出,div里的文字被重置了,只有触发事件后 自定义innerText里面的文字了,可以理解为div里的文档被替换掉了.

这是innerText 的触发时机.
innerHTML 用法基本和 innerText 相同,在你用得到的范围内,它们基本相同.所以它们的微妙区别此处不再赘述了.
提示一点.innerHTMl兼容性比innerText要高,推荐使用innerHTMl;

(完)

Liswi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document.write() 和(对象名).innerText=" " / innerHTML=""对于当前文档流的影响小结

document.write() 的影响时机当document.write()函数和一般文档流同时加载时,可以正常输出,不影响其他文档流,下方例1代码,其中 “我只是一个文档流” \ “我是跟第一个一起来的”\ 以及标签 \都是第一时间在统一文档流内加再进来的,此时它们互不影响,且按解析顺序排列,浏览器效果如图例[1]-1
复制链接

扫一扫