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

【问题标题】：How to remove multiple attributes from a node?如何从节点中删除多个属性？
【发布时间】：2018-11-05 14:21:15
【问题描述】：

我有这个图像元素：

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

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

除了这个重复的代码之外，还有其他方法吗：

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

【问题讨论】：

你可以设置它的outerHTML，但最好只是调用两次removeAttribute，或者创建你自己的接受多个参数的辅助函数

标签： javascript nodes

【解决方案1】：

我是这样做的--

(() => {
        'use strict';
        let token = 'src|alt';
        if (token === '' || token === '{{1}}') { return; }
        let tokens = token.split(/\s*\|\s*/);
        let selector = 'img';
        if (selector === '' || selector === 'img') {
            selector = `[${tokens.join('],[')}]`;
        }
        let rmattr = () => {
            let elements = document.querySelectorAll(selector);
            for ( let element of elements ) {
                for (let attr of tokens) {
                        element.removeAttribute(attr);
                }   
            }      
        };
        if (document.readyState === 'loading' || document.readyState === 'interactive' || document.readyState === 'complete') {
                 rmattr();
        } else {
                 addEventListener('load', rmattr);
        }
})();

【讨论】：

我认为您的代码将始终在第 4 行返回，因为您正在检查 token 与您在第 3 行分配给 token 的“src|alt”。
=== 表示token 必须是一个字符串，其内容必须是'' 或'src|alt'。

【解决方案2】：

Jquery 解决方案： 空格分隔的属性，如 image.removeAttr('src alt') 应该可以工作。

编辑：使用纯 Javascript，您可以使用 removeAttribute 遍历数组：

【讨论】：

这是 jQuery。我正在寻找基于 JavaScript 的解决方案。

【解决方案3】：

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

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

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

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

你会这样称呼它：

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

【讨论】：

【解决方案4】：

你可以创建一个函数来获取你想要删除的元素和属性。

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

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

&lt;img class="cat" src="img/tom.png" alt="Cat"&gt;

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

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

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

&lt;img class="cat" src="img/tom.png" alt="Cat"&gt;

【讨论】：

我们想到了完全相同的事情：D
非常感谢。这是最好的解决方案。
为了记录，改变内置对象是非常不好的做法。