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

所以基本上我试图构建自己的GitHub's tree slider版本。相关的Javascript/JQuery代码是：使用JQuery获取html文档并将其解析为DOM树

// 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片段，因为如果我执行相同的GET请求（例如，通过在网络浏览器中输入url），我期望看到整个网页，不只是一块。

因此，在我定义的回调函数中，我需要将“数据”参数解析到DOM中，以便我可以提取相关节点，然后执行动画过渡。但是，这对我来说没有意义。它通常看起来像一个糟糕的想法。为了访问DOM的一部分，客户端不得不解析整个HTML字符串。 GitHub声称这种方法比整页重新加载更快。但是如果我的解释是正确的，那么客户端仍然需要解析一整串HTML，无论是通过单击（并运行回调函数），还是通过在浏览器中输入新的URL来完成整页加载。所以我坚持要么将解析返回的HTML字符串解析为DOM，要么只是取得HTML文档的一部分。

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

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

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请求获取文档的一部分？

来源

2013-02-20 jayhendren

只是把它包起来; jQuery将解析它。

$(data) // in your callback

来源

2013-02-20 21:29:12 Mathletics

事实证明，我目前的问题主要在于解析，而不是在包装中。 – jayhendren 2013-02-20 22:34:13

想象一下，您想要在常规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的句子的末尾。也许，如果你不放他们，发动机会工作，但最好是安全的，并总是写下来！

来源

2013-02-20 21:47:06 albertoblaz

谢谢alberto。缺少分号只是由于GitHub博客文章的副本。我自己的代码有分号。 – jayhendren 2013-02-20 22:20:48

对不起。这只是一个建议，以防万一:) – albertoblaz 2013-02-20 22:37:52

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

回答

相关问题