我可以在元素关闭之前定位它吗？答案

【问题标题】：Can I target an element before it's closed?我可以在元素关闭之前定位它吗？
【发布时间】：2010-09-19 11:25:58
【问题描述】：

我想在不等待 DOM 加载的情况下向 body 标签添加一个类，但我想知道以下方法是否有效。我更关心有效性，而不是浏览器是否支持它。

<body>
  $("body").addClass("active");
  ...
</body>

谢谢，史蒂夫

【问题讨论】：

标签： javascript jquery html css dom

【解决方案1】：

.elementReady() plugin 似乎与您要查找的内容非常接近。

它使用setInterval 循环进行操作，一旦document.getElementById() 返回给定id 的元素，该循环就会退出。

您可以对该插件进行轻微修改（或提交更新/补丁），以允许使用通用选择器（至少对于“tagNames”），而不仅仅是 ids。

我不相信有任何真正可靠的跨浏览器兼容方法可以在加载元素之前对其进行寻址 - 除了这种setInterval hacking

除非您能够将您的 javascript 命令内像@JasonBunting 建议的那样放置在目标元素中。

【讨论】：

【解决方案2】：

如果该元素在 DOM 中不存在，则搜索将无法找到它并且不会应用该操作。如果您不能在 $(document).ready() 函数中执行此操作，您可能想尝试将代码放在被引用的元素之后。我相信这会奏效。

<body>
   <div id='topStories'></div>
   <script type='text/javascript'>
     $('div#topStories').addClass('active');
   </script>
</body>

如果你需要将类添加到正文中，我肯定会使用 $(document).ready()。

【讨论】：

因此，如果我理解正确，您是说该元素在关闭之前不存在。对吗？
我是说这是最安全的方法。我会假设，由于元素可能没有被完全指定（缺少结束标记），浏览器不会将它添加到 DOM，直到它被完全解析。不过，我不能指出强制执行这一点的标准。
赞赏。我会详细说明一下，看看我会激发更多的神经元 - 干杯。

【解决方案3】：

简短回答：视情况而定。显然，根据我的测试，答案似乎是肯定的，这取决于你想要什么。我刚刚测试了这个：

<html>
<head>
    <style type="text/css">
        .foobar { background-color: #CCC; }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.document.body.className = "foobar";
    </script>
    <div style="border: solid 1px"><br /></div>
    <script type="text/javascript">
    // happens before DOM is fully loaded:
        alert(window.document.body.className);
    </script>
    <span>Appears after the alert() call.</span>
</body>
</html>

在 IE 7 中，当alert() 发生时，值设置正确，但尚未应用样式（DOM 加载完成后立即应用）。

在 Firefox 中，样式已在 alert() 发生时应用。

不管怎样，希望对你有帮助。

【讨论】：

【解决方案4】：

基本上，答案是否定的。在 IE6 和 Firefox 2（我最有经验的浏览器）中，元素直到关闭标记之后才在 DOM 中（或者页面完成渲染，对于无效的 XHTML）。我知道 jQuery 提供了一种方便的方法，在大多数情况下似乎反应足够快以避免“闪烁”。你可以这样使用它：

<script>
  $(document).ready(function() {
    $("body").addClass("active");
  });
</script>
<body>
  ..
  ..
  ..
</body>

但对于 javascript，仅此而已。

当然，在您提供的示例中，您可以轻松实现相同的效果：

<body class="active">
</body>

【讨论】：

【解决方案5】：

这很有帮助。

为这个问题添加一个真实的世界。

我假设不支持 JavaScript，然后用 JavaScript 覆盖。问题是，当我必须等待 DOM 加载之前，我的覆盖启动站点会在构建时经历闪烁阶段。我希望，如果我可以在加载网站的其余部分之前向 body 元素添加一个“活动”类，我将能够在页面呈现之前应用 JavaScript 假定样式。

我不想做的是添加这个，然后在 Firefox4 出来的时候接到一个我不应该做的电话。

如果您看一下我建立的网站，您会发现它的降级很优雅，但这种变化让我很烦恼（尤其是当广告挂起该网站时）。我可以采用其他人的方法并假设使用 JS 构建它，但是来吧 - 这只是懒惰......

【讨论】：

@Jason，FF 和 IE 反应不同的知识。这基本上回答了我最初的问题，但考虑到 Mar 给了我我的解决方案，我不得不表扬他。希望我能分享它:)

【解决方案6】：

您可能会发现向标记添加类比在

标记中添加类更容易：

<script type="text/javascript">
    document.documentElement.className = 'active';
</script>

【讨论】：