Angular测试：点击完成后如何验证DOM中的链接元素是否成功移除

1. 直接校验节点挂载状态 #

有两种简单的判断方式，都可以直接拿到布尔结果：

• 调用document.contains(link)：节点在DOM树中时返回true，被移除后返回false
• 读取link.isConnected原生属性：已挂载到DOM的节点该属性为true，移除后变为false

2. 带校验的完整代码示例 #

var downloadURL = URL.createObjectURL(data);
var link = document.createElement('a');
link.href = downloadURL;
link.download = fileName;

// 建议先挂载到DOM，兼容老旧浏览器的下载触发逻辑
document.body.appendChild(link);
// 移除前校验
console.log('移除前是否存在于DOM：', document.contains(link)); // true
console.log('移除前isConnected值：', link.isConnected); // true

link.click();
link.remove();

// 移除后校验
console.log('移除后是否存在于DOM：', document.contains(link)); // false
console.log('移除后isConnected值：', link.isConnected); // false

// 额外补充：释放objectURL占用的内存，避免内存泄漏
URL.revokeObjectURL(downloadURL);

注意事项 #

如果你的代码没有手动把创建的a标签挂载到DOM树上，那link.remove()执行前后，节点本来就不在DOM中，上述校验方法返回的结果不会有变化，这种场景下的移除操作本身也没有实际意义。部分老旧浏览器不支持触发未挂载a标签的下载行为，因此建议先执行document.body.appendChild(link)再做后续操作。

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