如何无需追加到文档，直接从HTML变量中获取类似document.links的链接？

嘿，这个需求我之前也碰到过，其实不用把解析后的DOM元素加到页面里，也能轻松拿到类似document.links的链接集合～

方法一：用jQuery直接查询（适配你现有代码场景） #

既然你已经用$.parseHTML()把字符串转成了DOM节点集合，直接用jQuery的选择器就能在这个集合里查找所有<a>元素：

var $str = $.parseHTML("<td><a href='link1'>1...</a><span><a href='link2'>2...</a></span><a href='link3'>3...</a></td>");
// 查找所有<a>元素，包括嵌套的和直接在$str根节点的
var $allLinks = $(str).find('a').addBack('a');

如果要和document.links的行为完全一致（只获取带href属性的<a>和<area>元素），可以加上属性过滤：

var $allLinks = $(str).find('a[href], area[href]').addBack('a[href], area[href]');

这里的addBack()是为了防止$str本身就是<a>元素的情况，如果确定$str是容器节点（比如你的例子里的<td>），也可以省略addBack()，直接用$(str).find(...)。

方法二：原生JS内存容器查询 #

如果不想用jQuery，也可以创建一个内存中的虚拟容器，把解析后的HTML放进去再查询，完全不会影响页面DOM：

var htmlStr = "<td><a href='link1'>1...</a><span><a href='link2'>2...</a></span><a href='link3'>3...</a></td>";
// 创建一个临时div作为容器（不会加到页面里）
var tempContainer = document.createElement('div');
tempContainer.innerHTML = htmlStr;
// 用querySelectorAll获取所有符合条件的链接
var allLinks = tempContainer.querySelectorAll('a[href], area[href]');

为什么不能直接用document.links？ #

因为document.links是从当前页面的DOM树里获取的链接集合，而你的$str里的节点还没有被追加到文档中，不属于当前文档的DOM树，所以自然不会出现在document.links里。而上面的方法都是在内存中处理这些节点，不需要把它们加到页面里就能完成查询。

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