如何使用jQuery获取元素的标签名、类名及ID？

修改后的实现代码 #

var allElm = document.querySelectorAll(".frame *");

allElm.forEach((elm) => {
  elm.addEventListener("mouseover", function () {
    this.style = "border: 1px solid #7bc4ff;";

    // 获取元素的标签名、类名、ID
    var tagName = jQuery(this).prop("tagName").toLowerCase();
    var className = jQuery(this).attr("class") || "无";
    var id = jQuery(this).attr("id") || "无";

    // 拼接信息并展示
    var infoHtml = `
      <div class="elm-info">
        <p>标签名: <strong>${tagName}</strong></p>
        <p>类名: <strong>${className}</strong></p>
        <p>ID: <strong>${id}</strong></p>
      </div>
    `;
    jQuery(".elm-info").html(infoHtml);

    // 控制台输出完整信息
    console.log(`标签名: ${tagName}, 类名: ${className}, ID: ${id}`);
  });
});

关键逻辑说明 #

• 标签名获取：通过jQuery(this).prop("tagName")获取原生DOM属性，返回值为大写格式，用.toLowerCase()转为小写更符合阅读习惯
• 类名获取：使用jQuery(this).attr("class")读取类属性，若元素无类名则显示“无”
• ID获取：使用jQuery(this).attr("id")读取ID属性，无ID时同样显示“无”
• 样式与展示：鼠标悬停时给元素添加高亮边框，同时将拼接好的元素信息插入到指定容器中

效果展示 #

内容的提问来源于stack exchange，提问作者Oss_vahid