HTML 如何在JS中获取元素的标签名

在本文中，我们将介绍如何使用JavaScript获取HTML元素的标签名。获取元素的标签名在某些情况下非常有用，特别是当您需要根据元素的类型执行不同的操作时。

阅读更多：HTML 教程

什么是元素的标签名

HTML元素的标签名是指HTML代码中的标签名称，例如<div>、<p>、<h1>等。每个HTML元素都有一个唯一的标签名，它定义了元素的类型和功能。

使用tagName属性获取标签名

JavaScript提供了一个名为tagName的属性，可以用来获取元素的标签名。要使用tagName属性，您需要首先获取对应的HTML元素，可以使用getElementById、getElementsByClassName等方法来获取元素。

以下是一个使用getElementById方法获取元素标签名的示例：

<html>
<body>

<div id="myDiv">
  <p>Hello, World!</p>
</div>

<script>
var myDiv = document.getElementById("myDiv");
var tagName = myDiv.tagName;
console.log(tagName); // 输出结果为 "DIV"
</script>

</body>
</html>

在上面的示例中，我们首先使用getElementById方法获取了id为”myDiv”的元素。然后使用tagName属性获取了该元素的标签名，并将结果打印到控制台。

使用nodeName属性获取标签名

除了tagName属性，JavaScript还提供了nodeName属性，可以用来获取元素的标签名。nodeName属性与tagName属性功能相同，可以获得元素的标签名。

以下是一个使用nodeName属性获取元素标签名的示例：

<html>
<body>

<div id="myDiv">
  <p>Hello, World!</p>
</div>

<script>
var myDiv = document.getElementById("myDiv");
var nodeName = myDiv.nodeName;
console.log(nodeName); // 输出结果为 "DIV"
</script>

</body>
</html>

上面的示例与前面的示例类似，只是使用了nodeName属性替代了tagName属性来获取元素的标签名。

总结

在本文中，我们介绍了两种在JavaScript中获取元素标签名的方法：使用tagName属性和nodeName属性。这些方法可以让我们方便地获取HTML元素的标签名，并根据标签名执行相应的操作。无论使用哪个属性，都需要先获取对应的HTML元素，然后再使用属性来获取标签名。希望本文对您有所帮助！