DOM 之外的节点选择和操作（jQuery 的技巧是什么？）

Question

你好，我想在 dom 之外进行 dom 选择和操作。

目标是在 dom 之外构建我的小部件，并仅在准备好后将其插入到 dom 中。

我的问题是文档片段不支持 getElementById。我也尝试了createElement和cloneNode，但它也不起作用。

我正在尝试用普通的 js 来做到这一点。我习惯使用 jQuery 来完成此操作，它可以很好地处理它。我试图在 jQuery 源代码中找到窍门，但到目前为止没有成功......

Olivier

Answer 1

我做过类似的事情，但不确定是否能满足您的需求。
创建一个“等待区域”，例如普通的 或 。然后你可以在 JS 函数中执行类似的操作：

var HoldingArea = document.getElementById('spanReserve');
HoldingArea.innerHTML = widgetHTMLValue;

Answer 2

jQuery 将首先尝试使用 getElementById，如果这不起作用，它将使用 getAttribute("id") 搜索所有 DOM 元素，直到找到你需要的一个。

例如，如果您构建了以下未附加到 document 的 DOM 结构，并且将其分配给了 javascript var widget：

<div id="widget">
    <p><strong id="target">Hello</strong>, world!</p>
</div>

您可以执行以下操作：

var target;

// Flatten all child elements in the div
all_elements = widget.getElementsByTagName("*");

for(i=0; i < all_elements.length; i++){
    if(all_widget_elements[i].getAttribute("id") === "target"){
        target = all_widget_elements[i];
        break;
    }
}

target.innerHTML = "Goodbye";

那么 您需要的不仅仅是通过 ID 进行搜索，我建议安装 Sizzle 而不是重复 Sizzle 功能。假设您有能力安装另一个库。

希望这有帮助！

Answer 3

编辑：

沿着这些思路做一些简单的事情怎么样：

  DocumentFragment.prototype.getElementById = function(id) {
    for(n in this.childNodes){
      if(id == n.id){
        return n;
      }
    }

    return null;
  }

---

为什么不在您使用的任何其他库中使用 jQuery 或选择 API？ AFAIK 所有主要库都支持片段选择。

如果您想跳过像 jQ/Prototype/Dojo/etc 这样的更大的库，那么您可以使用 Sizzle - 它是为 jQ 和 Dojo 提供支持的选择器引擎，并且作为独立的版本提供。如果这也是不可能的，那么我想您可以深入研究 Sizzle 源代码，看看发生了什么。总而言之，为了避免 100k 的运行时间似乎需要付出很大的努力，而且您编写的代码运行时的速度可能会比放入 Sizzle 或其他开源库中的所有工作要慢。

http://sizzlejs.com/

哦还有...我认为（猜测）jQ 的技巧是元素不是脱离 DOM。我可能是错的，但我认为当你做类似的事情时：

$('<div></div>');

它实际上在 DOM 文档中，它只是不是主体/头节点的一部分。不过，这可能是完全错误的，这只是一个猜测。

所以你让我很好奇哈哈。我看了一下 sizzle.. 答案是 - 它没有使用 DOM 方法。似乎使用了一种算法来比较映射到选择器类型的各种 DOMNode 属性 - 除非我错过了一些东西...这是完全可能的:-)

但是正如下面评论中所述，Sizzle 似乎不适用于 DocumentFragments...所以回来到第一个:-)

Answer 4

现代浏览器（不是 IE）在 Element API 中有 querySelector 方法。您可以使用它在 DocumentFragment 中按 id 获取元素。

jQuery 使用 sizzle.js

它在 DocumentFragments 上的作用是：深度循环片段中的所有元素，检查元素是否属性（在您的情况下为 'id' ）是您要查找的属性。据我所知，sizzle.js 也使用 querySelector（如果可用）来加快速度。

如果您正在寻找跨浏览器兼容性（您可能就是这样），您将需要编写自己的方法，或者检查 querySelector 方法。

Answer 5

听起来你正在做正确的事情。不知道为什么它不起作用。

// if it is an existing element
var node = document.getElementById("footer").cloneNode(true);

// or if it is a new element use
// document.createElement("div");

// Here you would do manipulation of the element, setAttribute, add children, etc.
node.childNodes[1].childNodes[1].setAttribute("style", "color:#F00; font-size:128px");

document.documentElement.appendChild(node)

Answer 6

您实际上有两个工具可以使用：html() 以及在 XML 文档上使用普通的 jQuery 操作运算符，然后将其插入到 DOM 中。

要创建小部件，您可以使用 html():

$('#target').html('<div><span>arbitrarily complex JS</span><input type="text" /></div>');

我认为这不是您想要的。因此，看看 jQuery 选择器的附加行为：当传递第二个参数时，它可以是它自己的 XML 片段，并且可以对这些文档进行操作。例如。

$('<div />').append('<span>').find('span').text('arbitrarily complex JS'). etc.

所有的操作符，如append、appendTo、wrap等都可以在这样的片段上工作，然后它们可以被插入到DOM中。

不过，请注意：jQuery 使用浏览器的本机函数来操纵它（据我所知），因此您确实会在不同的浏览器上获得不同的行为。确保 XML 格式良好。我什至让它拒绝格式不正确的 HTML 片段。但最坏的情况是，返回并使用字符串连接和 html() 方法。