javascript - 使用 DOM 方法遍历属性？

Question

我需要从节点列表中删除一些属性并保留一些属性。例如，有一个 img 元素的列表，你只需要 src 和 alt 属性，有没有办法遍历元素的属性在给定列表中？

 <img src="" alt="" height="" width="" class="class1">
 <img src="" alt="" height="" width="" class="class2">
 <img src="" alt="" height="" width="" class="class3">
 <img src="" alt="" height="" width="" class="class4">
 <img src="" alt="" height="" width="" class="class5">
 <img src="" alt="" height="" width="" class="class6">
 <img src="" alt="" height="" width="" class="class7">
 <img src="" alt="" height="" width="" class="class8">
 <img src="" alt="" height="" width="" class="class9">
 <img src="" alt="" height="" width="" class="class10"> 

 <img src="" alt="">
 <img src="" alt="">
 <img src="" alt="">
 <img src="" alt="">
 <img src="" alt="">
 <img src="" alt="">
 <img src="" alt="">
 <img src="" alt="">
 <img src="" alt="">
 <img src="" alt="">

Answer 1

您可以遍历每个元素的属性，再次检查白名单中的属性名称，然后使用 removeAttribute()

删除任何其他内容

var images = document.querySelectorAll('img');

for ( var i = images.length; i--; ) {
    for ( var j = images[i].attributes.length; j--; ) {

        var attribute = images[i].attributes[j]; 

        if ( ['src', 'alt'].indexOf( attribute.name ) === -1 ) {
            images[i].removeAttribute(attribute.name);
        }

    }
}