将脚本添加到DOM对象

Question

我想在加载/渲染后立即添加一个适用于某种类型DOM对象的脚本。这种类型的对象总是与javascript脚本一起出现，我想将它们放在一些标签中。这样做是对的吗？如果是这样，我怀疑span不是这里使用的最佳标签，因为它可能与内部元素的显示方式相互作用。我应该使用什么标签？

<span>
  <div>the dom object to be modified by the script</div>
  <script>theJavascriptFunctionThatModifiesTheDomObject()</script>
</span>

Answer 1

我怀疑这是在DOM加载特定元素之后加载脚本的最佳方法，原因如下： -

• 它会使您的页面加载速度变慢。
• 用户将以离散的方式查看您的完整页面。

相反，你应该这样做： -

• 指定元素的选择器。
• 在正文末尾添加您的单个javascript代码。
• 使用该脚本更新DOM元素。

编辑： 解决方案1：将JS附加到正文的末尾，以便它可以访问所有DOM元素。 由于您使用ajax在DOM中注入元素，因此可以为XHR对象定义成功处理程序，该处理程序将修改DOM中的元素。

解决方案2：您可以在JS中定义一个单独的方法，并在某个事件上绑定此方法。在HTML标记中定义数据事件属性，并在成功处理程序中将元素附加到DOM，使用jquery数据方法提取数据事件并触发该事件。

至少它会使你的标记远离脚本逻辑。

一些有用的链接：

Best practices for speeding up your website - yahoo

Why we should load scripts at end - SO Link

Answer 2

这里的问题是脚本标记不知道它在DOM中的位置。最好做一些事情，比如在要改变的元素中添加一个类。在DOM就绪时，你会查找元素[s]并做你的魔法。

Answer 3

我会避免这种做法;脚本阻止页面加载 - 所以如果你在几个dom元素后执行此操作，页面将运行缓慢（或者如果发现错误则根本不运行）

尝试使用jquery onready - 例如：http://api.jquery.com/ready/

脚本[通常]需要放在页面底部以允许页面首先加载 ...此规则有例外，例如众所周知的现代化程序脚本库需要先行，以便在加载时评估dom