如何从节点中删除多个属性？

Question

我有这个图像元素：

<img class="cat" src="img/tom.png" alt="Cat">

我想同时删除src和alt属性。
我希望removeAttribute()方法采用多个参数，但事实并非如此。

除了这个重复的代码之外，还有其他方法可以做到这一点：

image.removeAttribute('src');
image.removeAttribute('alt');

Answer 1

不确定它会变得更好，但你可能可以这样做：

['alt', 'src'].forEach(attribute => image.removeAttribute(attribute));

或者创建一个通用的删除属性函数：

const removeAttributes = (element, ...attributes) => attributes.forEach(attribute => element.removeAttribute(attribute));

你会这样称呼它：

removeAttributes(image, 'alt', 'src');

Answer 2

您可以创建一个函数来接收要删除的元素和属性。

function removeAttributes(element, ...attrs) {
  attrs.forEach(attr => element.removeAttribute(attr))
}

removeAttributes(document.querySelector('img'), 'src', 'alt')

<img class="cat" src="img/tom.png" alt="Cat">

如果你想在 DOM 元素上调用它，你可以扩展 Element 原型。

Element.prototype.removeAttributes = function(...attrs) {
  attrs.forEach(attr => this.removeAttribute(attr))
}

document.querySelector('img').removeAttributes('src', 'alt')

<img class="cat" src="img/tom.png" alt="Cat">