如何从未插入DOM的HTML字符串中动态获取首个div的class名称

前置修正 #

你提供的customFileData变量定义存在语法疏漏，后两行HTML片段缺少开头的单引号，修正后的变量定义如下：

var customFileData = '<input type="file" class="file-upload-button" value="submit"'+
  '<div class="dynamic-progress-bar-234342123"></div>'+
  '<div class="success-message"></div>'

jQuery 实现 #

$(customFileData)会返回包含所有顶层元素的jQuery集合，你之前直接取attr('class')默认返回集合第一个元素（也就是input节点）的属性，只需先筛选div元素再取第一个即可：

const targetClassName = $(customFileData).filter('div').first().attr('class');
// 输出结果为 dynamic-progress-bar-234342123

原生 JavaScript 实现 #

借助DOMParser接口可直接在内存中解析HTML字符串为DOM对象，无需插入页面DOM树即可查询：

const parser = new DOMParser();
const htmlDoc = parser.parseFromString(customFileData, 'text/html');
const targetClassName = htmlDoc.querySelector('div').className;
// 输出结果为 dynamic-progress-bar-234342123

内容的提问来源于stack exchange，提问作者Atique Ahmed