jQuery：获取选定的元素标签名称答案

【问题标题】：jQuery: Get selected element tag namejQuery：获取选定的元素标签名称
【发布时间】：2011-07-17 20:52:09
【问题描述】：

有没有简单的方法来获取标签名称？

例如，如果我将$('a') 赋予一个函数，我想得到'a'。

【问题讨论】：

Does jQuery have any function to determine the tag type of the DOM element(s) referenced by jQuery object? 的可能重复项

【解决方案1】：

您可以拨打.prop("tagName")。例子：

jQuery("<a>").prop("tagName"); //==> "A"
jQuery("<h1>").prop("tagName"); //==> "H1"
jQuery("<coolTagName999>").prop("tagName"); //==> "COOLTAGNAME999"

如果写出.prop("tagName") 很乏味，您可以像这样创建一个自定义函数：

jQuery.fn.tagName = function() {
  return this.prop("tagName");
};

例子：

jQuery("<a>").tagName(); //==> "A"
jQuery("<h1>").tagName(); //==> "H1"
jQuery("<coolTagName999>").tagName(); //==> "COOLTAGNAME999"

请注意，按照惯例，标签名称返回 CAPITALIZED。如果您希望返回的标签名称全部为小写，您可以像这样编辑自定义函数：

jQuery.fn.tagNameLowerCase = function() {
  return this.prop("tagName").toLowerCase();
};

例子：

jQuery("<a>").tagNameLowerCase(); //==> "a"
jQuery("<h1>").tagNameLowerCase(); //==> "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); //==> "cooltagname999"

【讨论】：

从 jQuery 1.6 开始，应该是 .prop。
所有浏览器都遵循大写约定吗？如果没有，jQuery 会对此进行规范化吗？
tagName 是 DOM 规范的一部分，并且总是大写。
请注意，返回的字符串是大写字母。例如，如果您尝试将其与“div”或“a”进行比较，这将是一个问题。
使用 toLowerCase() 或 toUpperCase() 在将 prop('tagName') 结果与标签名称进行比较时可能会有所帮助。 if($("my_selector").prop("tagName").toLowerCase() == 'div') 或 if($("my_selector").prop("tagName").toUpperCase() == 'DIV')

【解决方案2】：

你可以使用 DOM 的 nodeName property:

$(...)[0].nodeName

【讨论】：

谢谢。效果很好 - 虽然我会使用更多的 jQueryish 版本，因为我现在处于 jQuery 世界中。
纯 JS 解决方案（比如这个）通常优于 jQuery 解决方案，特别是如果它们没有浏览器兼容性问题或者更加冗长。
... 特别是由于这些浏览器不兼容问题，如果有人选择解决方案并且不精通需要注意的浏览器不兼容问题，那么 jQuery 往往更胜一筹。 ;)
我认为这是优越的，因为 jQuery 版本无关紧要，该解决方案适用于所有版本。 +1
特别是如果您处于类似 each() 的情况下，您必须将元素转换回 jquery 对象以获取已经存在的属性，例如 $(this).prop('tagname')。 this.nodeName 通常更有效。 +1

【解决方案3】：

从 jQuery 1.6 开始，您现在应该调用 prop：

$target.prop("tagName")

见http://api.jquery.com/prop/

【讨论】：

【解决方案4】：

jQuery 1.6+

jQuery('selector').prop("tagName").toLowerCase()

旧版本

jQuery('selector').attr("tagName").toLowerCase()

toLowerCase() 不是强制性的。

【讨论】：

你为什么要new String？
因为toLowerCase()是String的一个方法

【解决方案5】：

这是另一种方式：

$('selector')[0].tagName

【讨论】：

不错的一个！比 nodeName 更清晰，甚至更短。 :P

【解决方案6】：

您应该不使用jQuery('selector').attr("tagName").toLowerCase()，因为它只适用于旧版本的 Jquery。

如果您确定您使用的是 >= 1.6 版的 jQuery 版本，您可以使用 $('selector').prop("tagName").toLowerCase()。

注意：

您可能认为现在（2016 年 1 月）每个人都在使用 jQuery 1.10+ 或其他版本，但不幸的是，事实并非如此。例如，今天很多人还在使用 Drupal 7，直到今天，Drupal 7 的每个正式版本都默认包含 jQuery 1.4.4。

因此，如果不确定您的项目是否将使用 jQuery 1.6+，请考虑使用适用于所有 jQuery 版本的选项之一：

选项 1：

jQuery('selector')[0].tagName.toLowerCase()

选项 2

jQuery('selector')[0].nodeName.toLowerCase()

【讨论】：

【解决方案7】：

nodeName 将为您提供大写的标签名称，而 localName 将为您提供小写。

$("yourelement")[0].localName

会给你：你的元素而不是你的元素

【讨论】：