zoukankan      html  css  js  c++  java
  • document.write vs document.getElementById

    document.write:

          JavaScript中对document.open所开启的文档流(document stream操作的API方法,它能够直接在文档流中写入字符串,一旦文档流已经关闭,那document.write就会重新利用document.open打开新的文档流并写入,此时原来的文档流会被清空,已渲染好的页面就会被清除,浏览器将重新构建DOM并渲染新的页面。

    一.写入文本(页面加载中可以写入,而不会出现重写页面问题)

    利用document.write来写入脚本,先考虑如下代码

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 </head>
     5 <body>
     6     <h1>Head</h1>
     7     <script>
     8         document.write('<p>hello document</p>');
     9     </script>
    10     <h2>Tail</h2>
    11 </body>
    12 </html>

    这段在h1h2之间内嵌一个脚本,使用document.write来写入一个p标签。刷新页面,可以看到最终的结果是:

    Head
    
    hello document
    
    Tail

    即要文本在脚本执行的位置被插入。这是因为,浏览器就解析HTML构建DOM的时候,如果遇到script就会暂停下来,解析script中的代码并执行,然后再继续解析剩余HTML。(阻塞进行的)此时再去浏览器中检测DOM的结构,会发现scripth2之间多了一个p,浏览器在解析完h1之后,碰到script并执行之,此时document.write将一段HTML代码写入到文档流中,script执行完毕后,浏览器会解析文档流中的字符串,对新添加的p标签进行解析。如果将渲染好的页面保存下来,不同的浏览器会有不同的结果。如Chrome和Firefox的做保存下来的页面文件中,script后面会增加p标签,而IE中则是维持原状。(这里指的是原有的HTML结构,不同浏览器将页面保存会作不同的处理,有些会增加一些不影响原有结构的标签或注释。这意味着,如果浏览器重新加载Chrome或Firefox中保存下来的页面文件,就会多出一个p标签。

    二.写入脚本(注意加转义符号)

    既然document.write可以写入p并被浏览器解析,那么自然地也可以写入script标签。

    <script>
        document.write('<script>alert("oops!!!")</script>');
    </script>

    将代码作出上面的改动,意图在利用document.write在页面中插入一段脚本。这段代码的本意是弹出一个窗口,阻塞浏览器对HTML的解析。浏览器下刷新页面,发现并不管用,取而代之的是显示出一个没有意料到的页面。

    1 Head
    2 
    3 ');
    4 Tail

    去检查DOM树,就会发现,这段脚本被拦腰截断了!浏览器将它解析成以下代码:

    1 <script>
    2     document.write('<script>alert("oops!!!")
    3 </script>
    4 ');

    插入文本中的</script>被当成了第一个script的闭合标签,因此这个段代码成了非法代码,因为document.write的调用书写不正确,缺少右边的括号)。此时,你可以在console中看到相关的错误信息。(控制台)解决这个问题,我们可以对插入文本中闭合的的标签进行轻微修改,对最后一个>进行转义,变成>此时再刷新一下页面,就可以看到预想中的结果。即页面中仅显示h1,弹窗阻塞了浏览器对HTML的解析,关闭弹窗后,浏览器继续对HTML的解析并完成对页面的渲染。再去看看DOM的结构,会发现在原有的script元素后面又多了一个新的<script>元素,其中所执行的代码就是我们的alert("opps!!!")

    弊端

    从某个角度说,document.write的实际功能确实很强,能够直接修改文档流,但它有很多弊端:

    在非loading阶段调用document.write会清除已加载的页面;

    document.write不能够在XHTML中使用;

    嵌入script中的document.write不能给任意节点添加子节点,因为它是随着DOM的构建执行的;

    利用document.write写入HTML字符串流并不是一个好方法,它有违DOM操作的概念;

    利用document.write添加script加载外部脚本时,浏览器的HTML解析会被script的加载所阻塞; 

    document.getElementById:

    document.getElementById(" ") 得到的是一个对象,用 alert 显示得到的是“ object ”,而不是具体的值,它有 value 和 length 等属性,加上 .value 得到的才是具体的值!

     document 对象

    属性: title ; bgColor ; url; ( 使用: document.title)

    方法:

    focus:使得元素得到焦点并执行由 onfocus 事件指定的代码。

    getElementById:获取对 ID 标签属性为指定值的第一个对象的引用。

    getElementsByName:根据 NAME 标签属性的值获取对象的集合。

    getElementsByTagName:获取基于指定元素名称的对象集合。

  • 相关阅读:
    WinInet中的FTP操作
    CodeIgniter 用户指南 版本 1.7.2
    《Windows Mobile实例开发》电子书提供下载
    程序静默安装的参数总结
    Select a table of certain webpage
    568A
    在IIS 5.1 或IIS6 中配置PHP 的FastCGI模式
    镁天三国育将篇
    镁天三国军事篇
    windows 环境下的 protoc 安装
  • 原文地址:https://www.cnblogs.com/liuwei-0313/p/9944145.html
Copyright © 2011-2022 走看看