JS 获取元标记名称 - Javascript

在Web开发中，经常需要在JavaScript中获取网页中的元素，其中一个关键就是获取元素的标记名称。本文将介绍如何在JavaScript中获取元标记名称。

使用tagName属性获取元标记名称

在JavaScript中，每个元素都有一个叫做tagName的属性，可以用来获取元素的名称。下面是一个例子：

const elem = document.querySelector("#mydiv");
const tagName = elem.tagName;
console.log(tagName); // 输出 "DIV"

上述代码中，首先使用document.querySelector方法获取了一个id为"mydiv"的元素，并将其赋值给elem变量。然后通过elem.tagName获取该元素的标记名称，并将其赋值给tagName变量。最后使用console.log方法输出tagName变量的值，即该元素的标记名称。

需要注意的是，tagName属性返回的标记名称是大写的。比如上述例子中返回的是"DIV"而不是"div"。如果需要获取小写的标记名称，可以通过elem.tagName.toLowerCase()来实现。

封装一个函数获取元标记名称

对于只需要获取元素的标记名称的情况，可以直接使用上述方法。但是如果需要多次使用，或者需要在多个地方使用，就可以将其封装成一个函数。

function getTagName(elem) {
  return elem.tagName.toLowerCase();
}

上述代码定义了一个名为getTagName的函数，该函数接受一个元素作为参数，返回该元素的标记名称。需要注意的是，这里使用了toLowerCase方法将标记名称转换成小写形式。这样做是为了避免在比较标记名称时出现大小写不一致的问题。比如下面的代码：

const elem = document.querySelector("#mydiv");
if (getTagName(elem) === "div") {
  // do something
}

上述代码中，首先获取了一个id为"mydiv"的元素，然后通过getTagName函数获取该元素的标记名称。最后判断标记名称是否为"div"，如果是，则执行do something代码块。

结论

获取元素的标记名称是JavaScript开发中的基本操作之一。通过上述方法，我们可以轻松获取元素的标记名称，并将其封装成函数以方便重用。希望本文对您有所帮助。