JavaScript中HTML字符串转为jQuery与DOM对象的方法

核心场景：将HTML字符串转为可操作元素

假设有一段拼接而成的HTML字符串变量：

var text = "<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>"
        + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>"
        + "</div>";

通过 jQuery 的构造器 $()，可以直接将该字符串解析为 jQuery 对象：

var $el = $(text);
alert($el.html());

上述代码调用 .html() 后，会弹出最外层 <div> 内部的 HTML 内容：<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>。完成判断：控制台成功弹出子元素 HTML 说明字符串已被正确解析为 jQuery 对象，且该对象指向最外层的 div。

第1步：将 jQuery 对象转为 DOM 对象

目的：获取原生 DOM 实例，以便使用原生 JS API（如 addEventListener、getAttribute）。

动作：利用 jQuery 的 .get(索引) 方法或数组下标访问。

// 使用 get() 方法
var domEl = $(text).get(0);

// 或使用数组下标
var domEl2 = $(text)[0];

重要参数与结果：索引必须小于集合长度，通常取 0。执行完毕后，domEl 即为标准的 DOM Element 对象。可以通过 typeof domEl !== 'object' || !domEl.jquery 等逻辑确认它不再具备 jQuery 扩展方法。

第2步：将 DOM 对象转为 jQuery 对象

目的：让原生 DOM 节点享受 jQuery 链式调用与方法库。

动作：再次使用 $() 包装 DOM 实例。

var nativeDom = document.getElementById("someId"); // 原生 DOM
var $jqObj = $(nativeDom); // 包装为 jQuery

可观察的完成状态：此时对 $jqObj 调用 .addClass()、.append() 等方法不再报错。需要注意的是，jQuery 对象和 DOM 对象的 API 是隔离的，直接混用会导致类型错误。

浏览器兼容性与纯JS实现备选方案

如果在不依赖 jQuery 的环境下，需要将 HTML 字符串转为 DOM 对象，由于各浏览器内核差异，历史上曾采用不同的解析策略：

1. Internet Explorer：使用 ActiveXObject("Microsoft.XMLDOM") 加载 XML 字符串。
2. 现代浏览器（Firefox/Mozilla/Opera/Chrome/Safari）：使用标准 DOMParser 接口。

function htmlStringToDOM(txt) {
    var parser = new DOMParser();
    // 注意 parseFromString 第二个参数需设为 "text/html" 以正确解析 HTML 而非 XML
    var doc = parser.parseFromString(txt, "text/html"); 
    return doc.body.children[0];
}

排错说明：若使用非 "text/html" 类型（如默认的 text/xml），某些浏览器可能会将标签视为文本节点而非真正的 DOM 节点。在实际操作中，推荐使用 DocumentFragment 结合正则或创建临时节点的方式在现代 Web 环境中更为通用。

总结

掌握 jQuery 与 DOM 之间的转换是编写健壮前端代码的关键。jQuery对象转DOM对象常用 .get(0) 或 [0]；DOM对象转jQuery对象只需使用 $() 进行封装。此外，在处理 HTML 字符串时，确保选择正确的解析环境能有效避免跨浏览器的解析异常。以上就是JavaScript中html字符串转化为jquery dom对象的方法的详细内容，更多关于JavaScript DOM对象转换的资料请关注本站其它相关文章！