文件上传场景下innerHTML控制台更新正常但DOM未生效的问题

我一眼就瞅到问题出在哪了——你用getElementsByClassName获取元素的时候踩了个常见的小坑：这个方法返回的是HTMLCollection（类数组的DOM元素集合），不是单个元素。你直接给这个集合设置innerHTML，其实只是给集合对象本身加了个自定义属性，根本没碰着实际的DOM元素！控制台打印的也是这个集合对象的自定义属性值，不是页面元素的真实内容，这就是DOM没同步更新的核心原因。

修复步骤 #

把你代码里的这行错误代码：

input.parentNode.parentNode.getElementsByClassName('gfield_label').innerHTML = fileName;

替换成下面两种方式的任意一种就行：

方式1：用querySelector（更简洁推荐） #

querySelector直接返回匹配的第一个元素，不用处理集合，省心：

input.parentNode.parentNode.querySelector('.gfield_label').innerHTML = fileName;

方式2：从集合中取第一个元素 #

要是你坚持用getElementsByClassName，记得加索引[0]拿到集合里的第一个元素：

input.parentNode.parentNode.getElementsByClassName('gfield_label')[0].innerHTML = fileName;

完整修复后的JavaScript代码 #

我还帮你补上了else分支里的重置逻辑，不然取消选择文件时标题不会变回"Choose File"：

var inputs = document.querySelectorAll( '.file-input input[type="file"]' );
Array.prototype.forEach.call( inputs, function( input ) {
 var label = input.nextElementSibling,
 labelVal = label.innerHTML;
 input.addEventListener( 'change', function( e ) {
 var fileName = '';
 if( this.files && this.files.length > 1 )
 fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
 else
 fileName = e.target.value.split( '\\' ).pop();

 if( fileName ) {
 label.innerHTML = fileName;
 // 修复：获取单个元素再设置内容
 input.parentNode.parentNode.querySelector('.gfield_label').innerHTML = fileName;
 console.log(input.parentNode.parentNode.querySelector('.gfield_label').innerHTML);
 } else {
 label.innerHTML = labelVal;
 // 补上重置标题的逻辑
 input.parentNode.parentNode.querySelector('.gfield_label').innerHTML = labelVal;
 }
 });
});

为啥之前控制台看起来有值？ #

你之前打印的input.parentNode.parentNode.getElementsByClassName('gfield_label').innerHTML，其实是你给HTMLCollection对象手动加的自定义属性值，不是DOM元素的innerHTML。浏览器允许给对象加自定义属性，所以控制台会显示你设置的文件名，但这和页面上的DOM元素完全不搭边，自然不会更新页面。

内容的提问来源于stack exchange，提问作者Fahad Sohail