如何检查开发者工具Elements面板中带target的a标签是否含rel属性？

首先得搞清楚为什么View Source和Elements面板内容不一样：View Source是服务器返回的原始HTML代码，而Elements面板展示的是浏览器渲染后、可能被页面JavaScript动态修改过的实时DOM结构。你的情况就是页面里的JS把第一个<a>标签的rel属性加上了，所以Elements里所有标签都有rel="noopener"，但原始HTML里第一个没有。

你原来的代码有两个关键问题：

• 只检查了第一个匹配的<a>标签，没有遍历所有带target属性的标签；
• 虽然jQuery选择器本身是基于当前DOM的，但你只取了第一个元素的属性值，导致判断不准确。

下面是能正确检测**实时DOM（即Elements面板内容）**的代码：

方案1：使用jQuery #

// 遍历所有带target属性的a标签，检查是否存在无rel属性的情况
let hasInvalidLink = false;
$('a[target]').each(function() {
    if ($(this).attr('rel') === undefined) {
        hasInvalidLink = true;
        return false; // 找到一个就跳出循环，提升效率
    }
});

if (hasInvalidLink) {
    alert('存在带target但无rel的标签');
} else {
    alert('所有带target的标签都有rel属性');
}

方案2：使用原生JavaScript（无需依赖jQuery） #

如果你的项目没有引入jQuery，原生JS的写法更稳妥：

// 获取所有带target属性的a标签
const targetLinks = document.querySelectorAll('a[target]');
let hasInvalidLink = false;

for (const link of targetLinks) {
    // 直接检查元素是否拥有rel属性
    if (!link.hasAttribute('rel')) {
        hasInvalidLink = true;
        break;
    }
}

if (hasInvalidLink) {
    alert('存在带target但无rel的标签');
} else {
    alert('所有带target的标签都有rel属性');
}

这两段代码都会遍历Elements面板里的实时DOM元素，逐个检查每个带target的<a>标签是否存在rel属性，完全符合你的需求——因为它们操作的就是浏览器当前渲染的DOM，而非服务器返回的原始HTML。

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