使用JQuery獲取html文檔並將其解析為DOM樹

Question

所以基本上我正在嘗試構建我自己的GitHub樹形滑塊版本。 相關的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片段，因為如果我執行相同的GET請求（例如通過在Web瀏覽器中鍵入url），我希望看到整個網頁和不只是一塊。

因此，在我定義的這個回調函數中，我需要將“data”參數解析為DOM，以便我可以提取相關節點然后執行動畫轉換。 但是，這對我來說沒有意義。 這通常看起來像一個壞主意。 客戶端必須解析整個HTML字符串才能訪問DOM的一部分是沒有意義的。 GitHub聲稱這種方法比整頁重新加載更快。 但是，如果我的解釋是正確的，客戶端仍然需要解析完整的HTML字符串，無論是通過單擊（並運行回調函數）來瀏覽樹，還是通過在瀏覽器中鍵入新URL來完成整頁加載。 因此，我堅持將返回的HTML字符串解析為DOM，或者理想情況下只獲取HTML文檔的一部分。

有沒有辦法簡單地將獲取的文檔加載到Javascript或JQuery DOM對象中，以便我可以輕松地操作它？ 或者甚至更好，有沒有辦法只獲取一個具有任意id的元素而不做一些瘋狂的服務器端的東西（我已經嘗試但最終是太意大利面條代碼，難以維護）？

我也已經嘗試過簡單地將數據參數解析為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文檔，解析內部信息並在客戶端顯示它，方法完全相同，好嗎？

我希望它可以幫助你:)

PS ：不要忘記在每個JavaScript句子的末尾添加分號。 也許，如果你不把它們，引擎會工作，但最好是安全並永遠寫它們！