HTML DOM nodeName 属性

什么是 nodeName 属性

nodeName 属性是 DOM 元素节点的一个只读属性，用于返回节点的名称。在 HTML 文档中，节点的名称通常就是标签名，比如 <div> 元素的 nodeName 就是 "DIV"，而 <p> 元素的 nodeName 就是 "P"。

如何使用 nodeName 属性

要访问节点的 nodeName 属性，首先需要获取到对应的 DOM 元素节点。可以通过 document.getElementById、document.querySelector 等方法来获取节点，然后直接访问其 nodeName 属性即可。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>nodeName 示例</title>
</head>
<body>
    <div id="myDiv">这是一个 div 元素</div>
    <script>
        var divNode = document.getElementById("myDiv");
        console.log(divNode.nodeName); // 输出 DIV
    </script>
</body>
</html>

在上面的示例中，我们通过 document.getElementById 方法获取了 id 为 "myDiv" 的 div 元素节点，并输出了其 nodeName 属性的值。

nodeName 和 tagName 的区别

在实际开发中，有时候会混淆 nodeName 和 tagName 这两个属性。它们的区别在于，nodeName 返回的是节点的名称（大写），而 tagName 返回的是节点的标签名（小写）。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>nodeName 和 tagName 的区别</title>
</head>
<body>
    <div id="myDiv">这是一个 div 元素</div>
    <script>
        var divNode = document.getElementById("myDiv");
        console.log(divNode.nodeName); // 输出 DIV
        console.log(divNode.tagName); // 输出 div
    </script>
</body>
</html>

在上面的示例中，我们分别输出了 nodeName 和 tagName 的值，可以看到它们的区别。

nodeName 属性的应用场景

nodeName 属性在实际开发中有很多应用场景，比如可以用来判断节点的类型，从而进行相应的操作。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>nodeName 应用场景</title>
</head>
<body>
    <div id="myDiv">这是一个 div 元素</div>
    <script>
        var divNode = document.getElementById("myDiv");
        if (divNode.nodeName === "DIV") {
            divNode.style.color = "red";
        }
    </script>
</body>
</html>

在上面的示例中，我们根据 nodeName 属性的值来判断节点是否为 div 元素，如果是，则改变其文本颜色为红色。

总结

通过本文的介绍，我希望你能够更加了解 HTML DOM 中的 nodeName 属性，以及它的基本用法和应用场景。在实际开发中，灵活运用 nodeName 属性可以帮助我们更好地操作和管理 DOM 元素节点。祝你在前端开发的道路上越走越远！