问答详情
源自:3-3 innerHTML 属性

有点混乱了,这些代码的执行顺序问题

通过innerHTML修改<h2>里的内容不是在输出<h2>之后才执行的吗,<h2>已经输出了为何还能改写?

另外一提,既然<h2>被改写了,为何原标题那里显示的是:     原标题:javascript    而不是原标题:hello world!

提问者:坚持MyDream 2016-10-14 11:43

个回答

  • lusir_0001
    2016-10-23 22:59:50

    <script type="text/javascript">

      function fu(){

          var mychar=document.getElementById("con");

          document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容

          mychar.innerHTML="Hello world!";

          document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容

      }

      var panduan=confirm("确定修改h2标题吗?");

      if(panduan){

        fu();

      }

      </script>

    可将上述代码与原先代码进行对比。

  • lusir_0001
    2016-10-23 22:44:42

    个人理解:(如有理解不到位的地方,请大神指正)

    1、页面渲染完成后进行页面绘制;

    <script type="text/javascript">

      var mychar=document.getElementById("con");

      document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容

      mychar.innerHTML="Hello world!";

      document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容

    </script>

    上述JavaScript代码是在页面渲染过程中执行的;

    2、“按引用传递”,id为con的<h2>标题和mychar是同一个引用(可以理解为指向同一个内存地址的指针)。

    mychar.innerHTML="Hello world!";语句改变了mychar所指向内存地址中存储的值(由javascript”变为了“Hello world!”),那么在绘制id为con的<h2>标题时,也会按“Hello world!”来绘制。

  • 呼呼伢儿3464468
    2016-10-16 11:53:18

    哈哈兄弟不错,自己能悟到一些,不过还不够,我要给你来个画龙点睛:去查查“按值传递”与“按引用传递”!瞬间明悟!

  • 坚持MyDream
    2016-10-14 11:52:01

    大概懂了,  innerHTML是 获取和修改  Object标签内容的,也就是说  第一个document.write处是获取Object标签内容修改前的值,获取到值之后跟Object标签之间不会互相影响。

  • 坚持MyDream
    2016-10-14 11:47:02

    感觉修改内容这点有点像  初始化  ,初始化要放到 head标签里

  • 坚持MyDream
    2016-10-14 11:46:10

    原因是先执行Object.innerHTML修改内容是吗