如何用原生JavaScript获取子元素中.pjt类元素的href属性值

attr()是jQuery专属的实例方法，原生JavaScript获取到的DOM元素不存在该API，这是报错的核心原因。

原jQuery代码对应的原生实现如下：

const goToPage = (e) => {
  // e.currentTarget 对应原jQuery中$(this)的指向，即绑定事件的元素
  const pjtElement = e.currentTarget.querySelector(".pjt");
  // 增加判空逻辑，避免找不到元素时抛出异常
  if (!pjtElement) return;
  // getAttribute行为和jQuery attr()完全一致，返回标签上书写的原始href值
  const slug = pjtElement.getAttribute("href");
  // 若需要解析后的绝对地址，可直接访问元素的href属性：const slug = pjtElement.href
  console.log("slug is:", slug);
  //window.location.href = slug;
};

关键调整说明 #

• 替换e.target为e.currentTarget：e.currentTarget始终指向绑定事件处理函数的元素，不会因为事件冒泡出现指向偏差，完全匹配原代码中$(this)的作用
• 原生属性获取的两种选择：
  • 用getAttribute('href')得到的是HTML标签上写的原始属性值，和jQueryattr()的返回结果完全一致
  • 直接访问元素.href得到的是浏览器解析后的完整绝对URL，可根据业务需求选择
• 增加非空判断，避免页面不存在对应类名元素时出现额外报错

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