10th WEEK BLOG1

一、document.write：

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

1、文本写入

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

2、写入脚本

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

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

 

弊端

document.write的实际功能确实很强，能够直接修改文档流，但它有很多弊端：

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

2、document.write不能够在XHTML中使用；

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

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

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

二、document.getElementById：

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

 document 对象

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

methods：

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

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

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

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