使用 JQuery 获取 html 文档并将其解析为 DOM 树

Question

所以基本上我正在尝试构建我自己的GitHub's tree slider 版本。相关的Javascript/JQuery代码是：

// handles clicking a link to move through the tree
$('#slider a').click(function() {
    history.pushState({ path: this.path }, '', this.href) // change the URL in the browser using HTML5 history module
    $.get(this.href, function(data) {
        $('#slider').slideTo(data) // handle the page transition, preventing full page reloads
    })
    return false
})

// binds hitting the back button in the browser to prevent full page reloads
$(window).bind('popstate', function() {
    $('#slider').slideTo(location.pathname)
}

好的，希望这是可以理解的。现在这是我对这里发生的事情的解释，然后是我的问题/问题：

在树中导航时 GET 请求的回调函数是 slideTo 方法，并且 HTML 字符串作为参数传入该函数。我假设 slideTo 是在脚本其他地方或自定义库中定义的函数，因为我在 JQuery 文档中找不到它。因此，出于我的目的，我正在尝试构建我自己的这个函数版本。但是传递给这个函数的参数“data”只是从 GET 请求返回的 HTML 字符串。但是，这不仅仅是我可以附加到文档中的 div 的 HTML 的 sn-p，因为如果我执行相同的 GET 请求（例如，通过在 Web 浏览器中输入 url）我希望看到一个完整的网页，而不仅仅是一个网页。

因此，在我定义的这个回调函数中，我需要将“数据”参数解析为 DOM，以便提取相关节点，然后执行动画转换。但是，这对我来说没有意义。这通常看起来是个坏主意。客户端必须解析整个 HTML 字符串才能访问 DOM 的一部分是没有意义的。 GitHub 声称这种方法比重新加载整页更快。但是，如果我的解释是正确的，客户端仍然必须解析完整的 HTML 字符串，无论是通过单击（并运行回调函数）导航树还是通过在浏览器中键入新 URL 等进行全页面加载。所以我要么将返回的 HTML 字符串解析为 DOM，要么只获取 HTML 文档的一部分。

有没有办法简单地将获取的文档加载到 Javascript 或 JQuery DOM 对象中，以便我可以轻松地操作它？甚至更好的是，有没有办法只获取具有任意 id 的元素而不做一些疯狂的服务器端事情（我已经尝试过，但最终代码太意大利面条且难以维护）？

我也已经尝试过简单地将 data 参数解析为一个 JQuery 对象，但这涉及一个迂回的解决方案，它似乎只工作了一半，使用 javascript 方法去除 HTML 中不需要的东西，比如 doctype 声明和 head标签：

var d = document.createElement('html');
d.innerHTML = data;
body = div.getElementsByTagName("body")[0].innerHTML;

var newDOM = $(body);
// finally I have a JQuery DOM context that I can use,
// but for some reason it doesn't always seem to work quite right

您将如何解决这个问题？当我自己编写这段代码并尝试让它自己工作时，我觉得无论我做什么，我都在做一些非常低效和骇人听闻的事情。

有没有办法通过 GET 请求轻松返回 JQuery DOM 对象？或者更好的是，只返回通过 GET 请求获取的文档的一部分？

Answer 1

把它包起来； jQuery 会解析它。

$(data) // in your callback

Answer 2

假设您想在普通 HTML 网页中解析 <p> 标记。你可能会使用类似的东西：

var p = $('<p>');

对吗？因此，您必须使用相同的方法来解析整个 HTML 文档，然后浏览 DOM 树以获取所需的特定元素。因此，你只需要说：

$.get(this.href, function(data) {
    var html = $(data);

    // (...) Navigating through the DOM tree

    $('#slider').slideTo( HTMLportion );
});

注意它也适用于XML文档，所以如果你需要通过AJAX从服务器下载一个XML文档，解析内部信息并显示在客户端，方法完全一样，好吗？

希望对你有帮助:)

P.S：不要忘记在每个 JavaScript 语句的末尾加上分号。可能，如果你不把它们，引擎会工作，但最好是安全的，总是写它们！