HTML DOM getNamedItem() 方法

在前端开发中，我们经常需要操作 DOM 元素，其中一个常用的方法就是 getNamedItem()。这个方法通常用于获取指定名称的属性节点。在本文中，我将详细介绍 getNamedItem() 方法的用法和示例。

语法

getNamedItem() 方法用于获取指定名称的属性节点。它的语法如下：

var attr = element.attributes.getNamedItem(name);

参数 name 是要获取的属性节点的名称。如果找到指定名称的属性节点，则返回该节点，否则返回 null。

示例

让我们通过一个简单的示例来演示 getNamedItem() 方法的用法：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>getNamedItem() 方法示例</title>
</head>
<body>
    <div id="myDiv" class="container" data-custom="123">Hello, world!</div>

    <script>
        var element = document.getElementById('myDiv');
        var attr = element.attributes.getNamedItem('data-custom');

        if (attr !== null) {
            console.log(attr.name); // 输出属性名
            console.log(attr.value); // 输出属性值
        } else {
            console.log('未找到指定属性节点');
        }
    </script>
</body>
</html>

在这个示例中，我们首先获取了 id 为 myDiv 的 div 元素，然后使用 getNamedItem() 方法获取了名为 data-custom 的属性节点。如果找到了指定的属性节点，我们将输出属性名和属性值；否则，输出未找到指定属性节点的提示。

注意事项

• getNamedItem() 方法只能用于获取属性节点，不能用于获取元素节点或文本节点。
• 如果要获取元素节点或文本节点，应该使用其他相应的方法，如 getElementById()、getElementsByTagName() 等。

通过本文的介绍，相信你已经对 getNamedItem() 方法有了更深入的了解。在实际开发中，合理使用 DOM 方法能够提高开发效率，希望本文对你有所帮助！