DOM之document.write_html/css_WEB-ITnose

document.write方法输出字符串到页面. 这个方法已经去比较古老的方法. 在现代的浏览器中比较少用了. 但是仍旧有它使用的地方.

document.write 执行

当文档加载时, 文档中一个脚本中有document.write(text). text将会同种方式渲染.

看下面的例子:

...<script>  document.write('*Hello, there!*')</script>...

document.write的内容是没有任何限制的. 它不需要输出有效的标签,关闭它们.

下面例子中, 每一个document.write输出文本的一小部分, 追加到页面中.

立即学习“前端免费学习笔记（深入）”；

<script> document.write('<style> td { color: #F40 } </style>') </script><table>  <tr>  <script> document.write('<td>') </script>   The sun is rising, and I'm happy to welcome it.  <script> document.write('</td>') </script>  </tr></table>

同样有一个类似名称document.writeln(text), 这个方法追加一个 '\n' 到文本后面.

仅打开文档

There is only one restriction on document.write.document.write只有一个限制约束.

document.write和document.writeln 方法都可以输出文本到一个打开的文档.

当页面加载完成时, 文档会被关闭. 试图使用document.write到页面, 则会引起内容被删除.

XHTML 和 document.write

Mozilla使用XML模型解析任何Content-Type:application/xhtml+xml的文档

在这个模式中, 浏览器作为XML解析,快速又非常好. 但是由于技术限制性解析, document.write不会执行.

好与坏

在多数实际中, 我们倾向于使用DOM去改变更新, 因为这样方便. 或者使用innerTHML做同样的事情.

但是document.write在添加一个script生成的文本到页面是非常快速的方式.

基于ES6的DOM元素动画库插件

基于ES6的DOM元素动画库插件

47

查看详情

同时, 他也使用在广告脚本和计数器上:

<script>  var url = 'http://ads.com/buyme?rand='+Math.random()  document.write('<script src="'+url+'"></scr'+'ipt>')</script>

---脚本URL动态的生成, 允许用户指定的数据添加到URL中,例如屏幕分辨率等其他的参数.

--添加一个随机数, 避免缓存相关数据

--关闭是分开的. 另外的浏览器认为脚本在之前完成.

非常的方便, 但也是不好的方式, 因为加载脚本可能会影响其他页面的加载渲染. 尤其是一个广告服务器非常慢的时候. 

慎重考虑插入第三方的脚本.

一个最好的避免页面阻塞的方式. 使用DOM创建SCRIPT元素, 追加它到头部.

var script = document.createElement('script')script.src = 'http://ads.com/buyme?rand='+Math.random()// now append the script into HEAD, it will fetched and executeddocument.documentElement.firstChild.appendChild(script)

使用DOM不会影响其他页面的加载, 使用第三方的脚本也是快速安全的.

总结

document.write(或者writeln)允许输出文本到HTML中. 如果在文档加载后使用他们, 则会删除原来的内容.

document.write的优势:

1. 他可以追加是随意的, 甚至部分, 不完整和难看的HTML到文档中

2. 非常快速, 因为浏览器没有改变已存在的DOM结构.

有时候通过document.write方式添加脚本. 最好不要这样做, 这样其他的页面会等待脚本的加载和执行.

如果服务器在处理, 页面要加载非常多. 不管任何方式, 页面会等待服务器.

通过DOM方式来代替document.write(大多数情况下)

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=229 ,欢迎大家传播与分享.