有个需求需要在浏览器中将部分页面的内容进行打印，由于项目的源代码过于老旧使用自研封装的js框架。根据需求的要求浏览器当前页面中弹框部分需要打印出来。按照传统的打印方式直接使用js代码打印。
// 获取打印区域范围
var printConent = document.getElementById('打印区域ID').innerHTML;
// 新的窗口打印内容
var printWindow = window.open('','','height=600,wdith=800');
printWindow.document.write('<html><head><title>标题</title></head><body >');
// 拼接打印内容的html
printWindow.document.write(printConent);
printWindow.document.write('<body><html>');
printWindow.print();
//打印完关闭窗口
printWindow.document.close();
但是实际上打印后发现，页面有<input>标签的value显示有值，但是实际上打印出来没有值的情况。经过在前端浏览器通过console.log()打印发现获取打印区域中input标签的value属性不存在。但是页面又明明有值。这是什么情况？
经过排查发现我们是通过js将value属性设置的值，是不是因为dom没更新导致的？为什么js设置了value通过‘var printConent = document.getElementById('打印区域ID').innerHTML*方式拿不到value？只能带着疑问加代码试试看了。
由于我只是想刷新页面的局部dom树，刷新整个页面的话一方面对客户的体验又会非常不友好，另一方面刷新全部dom成本又太高，只能使用笨办法用js原生方式局部刷新dom。
var temp = document.getElementById('inputid');
temp.setAttribute('value','value的值');
temp. innerHTML = temp. innerHTML;
以上设置了以后页面局部打印就正常了。当然对应复杂的大量dom操作还是不建议这么干可能会引起性能问题。由于系统比较老旧只能使用该方式，在新的系统使用vue.js等框架可能不存在该问题，vue.js优秀的特性虚拟DOM、异步更新、数据响应式等就不在本文的讨论范围了。
