使用DOM方法循环属性

Loop through attributes using DOM methods?

本文关键字：属性 循环 方法 DOM 使用      更新时间：2023-09-26

我需要从节点列表中删除一些属性并保留一些属性。例如，有一个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="">

您可以迭代每个元素的属性，在白名单中再次检查属性名称，并使用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);
        }
    }
}
相关文章：