removeAttribute 和 removeAttributeNode 都是用于从 HTML 元素中移除属性的 DOM 方法,但它们在用法和接受的参数上有一些区别。
removeAttribute
removeAttribute 是一个元素(Element)对象的方法,它接受一个字符串参数,即要移除的属性的名称。这个方法会直接从元素上移除指定的属性,而不需要你提前获取到该属性节点。
示例代码:
javascript复制代码
| var element = document.getElementById('myElement');  | |
| // 假设元素有一个名为 "data-custom" 的属性  | |
| element.removeAttribute('data-custom');  | |
| // 现在 "data-custom" 属性已经从元素上移除了 | 
removeAttributeNode
removeAttributeNode 也是一个元素(Element)对象的方法,但它接受一个 Attr 对象作为参数,即要移除的属性节点。这通常意味着你需要先通过 attributes 集合或其他方式获取到该属性节点,然后才能使用 removeAttributeNode 来移除它。
示例代码:
javascript复制代码
| var element = document.getElementById('myElement');  | |
| // 获取名为 "data-custom" 的属性节点  | |
| var attributeNode = element.attributes.getNamedItem('data-custom');  | |
| if (attributeNode) {  | |
| // 移除该属性节点  | |
| element.removeAttributeNode(attributeNode);  | |
| // 现在 "data-custom" 属性已经从元素上移除了  | |
| } | 
区别总结
- 参数类型:removeAttribute接受一个字符串参数(属性名),而removeAttributeNode接受一个Attr对象参数(属性节点)。
- 使用场景:如果你只是想简单地移除一个属性,而不需要对该属性节点进行其他操作,那么 removeAttribute更为方便。但如果你已经获取到了属性节点,并可能需要对它进行其他操作(比如检查其值、修改其值等),然后再移除它,那么removeAttributeNode会更合适。
- 返回值:removeAttribute没有返回值(或者可以认为它返回undefined),而removeAttributeNode返回被移除的属性节点(Attr对象)。这在某些情况下可能是有用的,比如你可能想在移除属性后仍然能够访问或操作该属性节点。