时间戳

首页 > 解决方案 > 如何动态获取类名

javascript - 如何动态获取类名

问题描述

我正在动态操作 DOM。

我有 HTML 元素

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

现在 - 我想获取 firstDiv 的类名。我如何得到它？

jQuery 或 JavaScript 都可以。但我做不到——

$(div[class*='dynamic-progress-bar']).attr('class')

因为，它还没有被操纵到 DOM。

当我做 - 

$(customFileData).attr('class');

获取结果 --- 文件上传按钮

任何想法，如何获得第一个 div className？

标签： javascripthtmljquery

解决方案

假设 HTML 是有效的（目前>我在下面的代码中添加了一个缺失的输入）

以下作品

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

var x = $('input+div', `<root>${customFileData}</root>`).attr('class');

console.log(x);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

虽然，我的 jQuery 很弱，但应该如此，所以可能有比这更好的方法！

vanilla javascript 版本 - DOMParser

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

var doc = new DOMParser().parseFromString(customFileData, 'text/html');
var x = doc.querySelector('div');

console.log(x.className);

香草 javascriptdocument.createElement 

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

var doc = document.createElement('root');
doc.innerHTML = customFileData;
var x = doc.querySelector('div');

console.log(x.className);

推荐阅读