从完整HTML文档创建jQuery DOM对象时find()方法失效问题排查

这个问题我之前也踩过坑，其实是jQuery处理完整HTML文档字符串的特殊逻辑在搞鬼～

问题原因 #

当你把包含DOCTYPE、<html>、<head>、<body>的完整HTML字符串传给$()时，jQuery并不会原封不动地把整个文档结构转换成DOM对象集合，而是会自动提取<body>标签内的所有直接子元素，作为返回的jQuery对象的成员。

举个实际例子，假设你的data内容是：

<!DOCTYPE html>
<html>
<head>
    <title>测试页面</title>
</head>
<body>
    <h1>这是标题</h1>
    <table>
        <tr><td>表格内容</td></tr>
    </table>
</body>
</html>

执行var dummy2 = $(data)后，这个jQuery对象里的元素其实是[<h1>这是标题</h1>, <table>...</table>]——相当于直接把body里的子元素拎出来了，而不是保留整个html/body的层级结构。

这就解释了两种操作的差异：

• $(data).find('tr')能正常找到：因为<tr>是<table>的后代元素，find()会遍历集合内所有元素的后代，自然能匹配到；
• $(data).find('h1')找不到：因为<h1>是jQuery集合里的直接成员，不是任何元素的后代，find()只会查找后代节点，所以匹配不到。

解决方案 #

这里有几种靠谱的解决方式：

方式1：用filter()代替find()

如果你的<h1>是body的直接子元素，直接用filter()匹配集合内的元素即可：

var dummy1 = $(data).filter('h1');

方式2：给HTML套一个容器标签

把整个HTML字符串包裹在一个额外的容器（比如<div>）里，这样所有元素都会变成这个容器的后代，之后用find()就能找到任何元素了：

var dummy1 = $('<div>' + data + '</div>').find('h1');

这种方法简单直接，唯一的小缺点是多了一层容器，但完全不影响元素查找。

方式3：用原生DOMParser解析完整文档

如果需要保留完整的文档结构（比如要访问<head>里的元素），可以用原生DOM的解析方法创建完整文档对象：

var doc = new DOMParser().parseFromString(data, 'text/html');
var h1 = $(doc).find('h1');

这种方式会生成一个完整的HTML文档，不管你的<h1>在<body>还是<head>里，都能通过find()精准定位。

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