HTML - DOM 元素 removeAttributeNode() 方法

removeAttributeNode() 方法允许您从元素中删除特定的属性节点。

语法

element.removeAttributeNode(attributeNode)

参数

此方法接受如下所述的单个参数。

参数	描述
attributeNode	您要从元素中删除的节点对象。

返回值

removeAttributeNode() 方法返回从元素中删除的属性节点。

HTML DOM 元素“removeAttributeNode()”方法示例

以下是在 HTML DOM 元素中不同场景下使用 removeAttributeNode() 方法的一些示例。

删除自定义数据属性节点

此示例演示了如何使用 removeAttributeNode() 方法从<div> 元素中删除自定义数据属性节点。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Remove Custom Data Attribute Node</title>
</head>

<body>
    <h1>HTML DOM Element</h1>
    <h2>removeAttributeNode() Method</h2>
    <p>Click the button below to remove a custom data
        attribute node from the <div> element.
    </p>

    <div id="my" data-info="custom">
        This div has a custom data attribute.
    </div><br>

    <button onclick="removeDataAttributeNode()">
        Remove data-info Attribute
    </button>

    <script>
        function removeDataAttributeNode() {
            const div = document.getElementById('my');
            const attr=div.getAttributeNode('data-info');
            
            if (attr) {
                div.removeAttributeNode(attr);
                document.getElementById('o').textContent= 
                'Data attribute removed successfully.';
            } else {
                document.getElementById('o').textContent= 
                'Data attribute not found.';
            }
        }
    </script>
    <div id="o"></div>
</body>

</html>

删除 Href 属性节点

此示例演示了如何使用 removeAttributeNode() 方法从元素中删除 href 属性节点。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Remove Attribute Node</title>
</head>

<body>
    <h1>HTML DOM Element</h1>
    <h2>removeAttributeNode() Method</h2>
    <p>Click the button below to remove the href 
        attribute from the anchor (<a>) element.
    </p>

    <a href="https://tutorialspoint.com" id="my">
        Visit tutorialspoint.com
    </a><br><br>

    <button onclick="removeHrefAttribute()">
        Remove href Attribute
    </button>

    <div id="otpt"></div>

    <script>
        function removeHrefAttribute() {
            const link = document.getElementById('my');
            const hrefAttr=link.getAttributeNode('href');
            
            link.removeAttributeNode(hrefAttr);
            document.getElementById('otpt').textContent= 
            'Href attribute removed successfully.';    
        }
    </script>
</body>

</html>

支持的浏览器

方法
removeAttributeNode()	是	是	是	是	是

html_dom_element_reference.htm

打印页面