jQuery：在 DOM 之外选择和操作 html 元素答案

【问题标题】：jQuery: Selecting and manipulating html elements outside the DOMjQuery：在 DOM 之外选择和操作 html 元素
【发布时间】：2012-08-02 13:30:32
【问题描述】：

据我所知，只有已加载到 DOM 中的对象才能使用选择器进行操作。这在下面的示例中进行了说明，当单击按钮时，它的单击处理程序未成功尝试选择要加载的页面中的元素并将其更改为之前的 html。我推测，因为在链接页面加载到 DOM 之前触发了点击处理程序，所以选择器不会影响元素。

我的问题是，有没有办法实例化一个外部 html 块并在将其插入 DOM 之前对其进行操作。

script_1.js：

$(document).ready(function () {
    $("#testButton").click(function () {
        $("#externalPageDiv").html("hello world");
    });
});

外部页面html：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script src="script_1.js"></script>
</head>

<body>
    <div data-role="page" id="externalPage" data-add-back-btn="true">
        <div data-role="content" id="externalPageContent">
            <div id="externalPageDiv"></div>external page</div>
    </div>
</body>

主页 Html:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script src="script_1.js"></script>
</head>

<body>
    <div data-role="page" id="internalPage_1" data-add-back-btn="true">
        <div data-role="content" id="internalPageContent_1">
            <a href="externalPage.html" id="testButton" data-role="button" rel="external">Page Change</a>
        </div>
    </div>
    <div data-role="page" id="mainPage" data-add-back-btn="true">
        <div data-role="content" id="mainPageContent">Main Page</div>
    </div>
</body>

【问题讨论】：

~~不，你不能。您需要先在文档中插入代码。~~对不起，我错了。
@davidbuzatto - 是的。您可以通过 Ajax 检索一段 html，或者在 JS/jQuery 代码中生成它，并在将其插入 DOM 之前使用 jQuery 对其进行操作。
@nnnnnn 类似 $( "html code here" ).manipulations...?

标签： jquery html dom jquery-selectors

【解决方案1】：

我正在纠正我的错误评论。是的，你可以这样做，但是阅读jQuery文档，据说代码是插入到DOM中的http://api.jquery.com/jQuery/#jQuery2。因此，即使是下面的代码似乎也没有在 DOM 中插入任何内容，它确实被插入了。

试试这个：

var codeToProcess = "<div>" +
                    "    <div id='myDiv1'>a</div>" +
                    "    <div id='myDiv2'>b</div>" +
                    "    <div id='myDiv3'>c</div>" +
                    "</div>";

var $toProcess = $( codeToProcess );
$toProcess.find( "div" ).addClass( "processed" );

// getting by id before insertion
alert( $toProcess.find( "#myDiv1" ).html() );
alert( $( "#myDiv1" ).html() ); // this will return null, since the divs
                                // were not yet added to the document

$toProcess.appendTo( "#container" );
// or $( "#container" ).html( $toProcess );

// getting by id after insertion
alert( $( "#myDiv2" ).html() );

jsFiddle：http://jsfiddle.net/davidbuzatto/me7T3/

编辑：

要从外部文件插入代码，您可以使用 load 函数。您可以在此处查看示例：http://jsfiddle.net/davidbuzatto/zuFsc/ 请注意，在此示例中，我使用了 echo 服务 os jsFiddle 来模拟外部文件。看看这里How do you output a view file as an ajax response in Java?和这里http://api.jquery.com/load/

【讨论】：

“所以，即使下面的代码似乎也没有在 DOM 中插入任何内容，它确实被插入了。” - 您显示的代码显式插入了动态创建的元素使用.appendTo("#container") 进入DOM（其中“#container”已经存在）。您链接到的 jQuery doco 并没有真正说明元素已插入 DOM - 它创建“DOM 元素”，但它们不在表示显示页面的 the DOM 中，除非并且直到你插入它们。
@nnnnnn：我同意，但我指的是“var $toProcess = $(codeToProcess);”代码。 jQuery 文档说此代码将在 DOM 中插入标记。 jfriend00 似乎同意它。
我在 jQuery 文档中看不到它这样说的地方。在我看来，jfriend00 的回答与我的立场一致。如果 $toProcess = $(codeToProcess) 行实际上将新创建的元素插入到 DOM 中，那么您将能够在页面中看到它们，您不需要 .appendTo()...
@nnnnnn：试试我的小提琴并删除附加。您将看不到插入的代码。 jQuery 文档：If a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML (i.e., it has <tag ... > somewhere within the string). If not, the string is interpreted as a selector expression, as explained above. **But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements. You can perform any of the usual jQuery methods on this object**
@BenPearce：Ben，我更新了我的小提琴以通过 id 获取插入的元素（插入前后）。我在我的帖子中插入了一个链接，该链接指向如何加载外部文件的示例。

【解决方案2】：

您可以使用 javascript 手动创建未插入 DOM 层次结构的 DOM 元素，并且可以在将它们插入 DOM 之前任意操作它们。

但是，如果您试图在页面 HTML 被解析之前操作由页面 HTML 创建的 DOM 元素，则不能这样做。 DOM 元素此时不存在，因此除非您按照第一段所述手动创建它们，否则没有什么可操作的。

某些操作仅适用于插入到 DOM 层次结构中的 DOM 元素，例如 document.getElementById()，但其他方法可以用于不在主层次结构中的 DOM，例如 item.getElementsByClassName()，其中 item 是不在 DOM 层次结构中的 DOM 元素。

在 jQuery 中，默认上下文是文档，因此像 $(".foo") 这样的简单选择器操作只会搜索 DOM 文档层次结构中的 DOM 元素。但是，如果您传递特定的上下文 $(".foo", item)，那么 jQuery 选择器将搜索该上下文，而不是主文档。

【讨论】：

我想做的是从外部 DOM 中选择一个元素，操作它的元素，然后将其插入当前 DOM。为此，我试图实施你最后一段的建议，但没有成功。如果我想从 html 文件 externalHtml.html 中选择 id = "externalPageDiv" 的元素，代码将是 $("#externalPageDiv", "externalHtml.html").getElementById(...);
@BenPearce - 您不能对文本文件运行 DOM 查询。如果它在同一个域中，您可以使用 jQuery 的 .load() 将其加载到分离的 DOM 元素中，然后在该分离的元素上使用 DOM 搜索功能。
如果不将 html 模板添加到 DOM 就无法实例化，这似乎对 OOP 很不友好。
@BenPearce - 我不知道为什么这与 OOP 有关。要操作文件中的数据，必须将其加载到 CPU 可以访问的某种数据结构中。要在其上使用 DOM 操作函数，必须将其加载到 DOM 元素中。您不必将其放入页面中。您可以创建一个不在页面中的 DOM 元素并将模板加载到该元素中并在其上使用 DOM 函数。但是，毫不奇怪，DOM 函数仅适用于 DOM 元素，因此您必须先将模板放入 DOM 元素中，然后才能在其上使用 DOM 函数。对我来说似乎很合乎逻辑。
我想我对 DOM 和页面之间的区别感到困惑。如何在不将元素插入页面的情况下将元素插入 DOM？