HTML - DOM 元素 hasAttribute() 方法

**hasAttribute()** 方法检查 HTML 元素中是否存在某个属性。如果属性存在，则返回“true”，否则返回“false”，表示该属性不存在。

语法

element.hasAttribute(name);

参数

参数	描述
name	表示属性名称的字符串。

返回值

如果 HTML 元素上存在该属性，则该方法返回布尔值“true”；否则返回“false”。

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

以下是 hasAttribute() 方法的一些示例，这些示例检查 HTML DOM 元素中是否存在特定属性。

检查特定属性

此示例演示如何使用 hasAttribute() 方法通过返回 true 或 false 来检查特定属性。

<!DOCTYPE html>
<html lang="en">
<head>  
    <title>
        HTML DOM Element hasAttribute() Method
    </title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>hasAttribute() Method</h2>
    
    <div id="exampleDiv" title="Sample Div">
        Does the div have a title attribute?
    </div>  
    
    <p id="attributeInfo"></p>

    <script> 
        const divElement = document.getElementById
        ('exampleDiv');
        const hasTitle = divElement.hasAttribute
        ('title');
        document.getElementById
        ('attributeInfo').textContent = 
        hasTitle.toString(); 
    </script>
</body>

</html>

检查多个属性

此示例演示如何使用 hasAttribute() 方法检查特定属性，然后在单击按钮时显示结果。它检查 ID 为 exampleDiv 的**<div>**元素是否具有 title 和 data-info 属性。

<!DOCTYPE html>
<html>
<head>  
    <title>
        HTML DOM Element hasAttribute() Method
    </title>
</head>;

<body>
    <h1>HTML - DOM Element</h1>
    <h2>hasAttribute() Method</h2>
    <div id="exampleDiv" title="Div" data-info="12345">
       Hello!I am Div.Check my attributes?Hit the button!
    </div>
    <br>
    <button onclick="displayAttributes()">
        Display Attributes
    </button>

    <script>
        function displayAttributes() {
            const divElement = document.getElementById
            ('exampleDiv');
            const hasTitle = divElement.hasAttribute
            ('title');
            const hasDataInfo = divElement.hasAttribute
            ('data-info');

            alert(`Title attribute: ${hasTitle}
            \nData-info attribute: ${hasDataInfo}`);
        }
    </script>
</body>

</html>

处理属性不存在的情况

此示例帮助我们了解如何使用 hasAttribute() 检查属性是否存在并相应地显示消息，如果属性存在则返回 true，如果属性不存在则返回 false。

<!DOCTYPE html>
<html lang="en">
<head>  
    <title>
        Handling missing Attribute
    </title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>hasAttribute() Method</h2>
    <div id="exampleDiv">
        Does Div have any attributes?
    </div>

    <button onclick="displayAttributes()">
        Display Attributes
    </button>
    
    <p id="attributeInfo"></p>
    <script>
        function displayAttributes() {
            const divElement = document.getElementById
            ('exampleDiv');
            const hasTitle = divElement.hasAttribute
            ('title');
            document.getElementById
            ('attributeInfo').textContent = 
                `false - It has ${hasTitle ?
                 'title' : 'no'} attribute.`;
        }
    </script>
</body>

</html>

支持的浏览器

方法
hasAttribute()	是	是	是	是	是

html_dom_element_reference.htm

打印页面