如何找到具有特定“类型”属性值的 <script> 元素？

Posted 2023-05-09

【中文标题】如何找到具有特定“类型”属性值的 <script> 元素？

【英文标题】：How to find <script> elements with particular value of "type" attribute?

【发布时间】：2013-06-03 18:10:58

【问题描述】：

假设在一个随机的 html 文档中有以下脚本标签：

<script id="target" type="store">
    //random javascript code
    function foo()
       alert("foo");
    
    foo();
</script>

谁能解释为什么下面的表达式没有找到 script 的所有元素，其 type 属性的值为 store。

var sel = $('#target script[type="store"]');

jQuery 版本：v1.7.2 Chrome 版本：25.0.1364.172（在 Debian Squeeze 上运行）

【问题讨论】：

为什么选择这个复杂的选择器？由于只有一个元素可以有一个给定的 id，你应该简单地使用 $('#target')

OP 对“所有元素”感兴趣。

【参考方案1】：

您的选择器$('#target script[type="store"]') 将匹配任何类型为store 的脚本标签，该标签是ID 为target 的元素的子元素。对于您的示例 HTML，情况并非如此。

如果您想选择类型为store 的所有脚本标签，您的选择器应如下所示：$('script[type="store"]')。

如果您只想选择 ID 为 target 的特定脚本标签，则只能使用 $('#target')。无需更具体，因为 ID 对于该元素应该是唯一的。仅使用 ID 选择器也会更有效，因为 jQuery 可以利用原生 document.getElementById() 来选择您的元素（也许是微优化，但仍然......）

【参考方案2】：

因为你写的意思是：找到每个script 元素，其属性type 等于store 并且是#target 的后代（因为空格）。

你可以这样做：

var sel = $('script#target[type="store"]');

但这是不必要的，因为 ID 已经标识了一个元素 - 文档中的任何元素都不能共享相同的 ID。

如果我理解你的描述，你需要的是：

var sel = $('script[type="store"]');

还有一件事：您不应该为此使用type 属性。 It has a very specific purpose:

type 属性给出了脚本的语言或格式 数据。如果属性存在，其值必须是有效的 MIME 类型。不得指定 charset 参数。默认值，即 如果该属性不存在，则使用“text/javascript”。

所以我建议你使用data-type 而不是type。

【参考方案3】：

你需要这个 -

var sel = $('#target[type="store"]');

【参考方案4】：

你需要做的

var sel = $('script#target[type="store"]');

【参考方案5】：

在此选择器中，您正在寻找在脚本标签内带有 type="store" 的脚本标签。你应该试试：

$('script#target[type="store"]');

【讨论】：

@dystroy 不要讨厌这家伙，他只是在玩 SCITE :)

【参考方案6】：

使用这个

var sel = $('script#target[type="store"]');

【参考方案7】：

可能的最短解释：

您正试图以#target 的子脚本为目标。

例如，如果您的标记的效果是……

<div id="target"><script type="store"></script></div>

...您的 jQuery 选择会起作用。

要选择具有特定值类型的所有脚本元素，请执行以下操作：

$('script[type="value"]')

要选择具有 ID 的特定脚本，请执行以下操作：

$('script#id[type="value"]')

也可以在没有标识符的情况下定位正在执行的脚本：

<script>
  // Prevent Global Scope Pollution
  (function($)

    // DO - Use it outside of an event...
    var Script_Self = $('script').last();
    console.log(Script_Self);

    // DONT - Use it inside of an event...
    $(document).on('ready', function() 
      var Script_Self = $('script').last();
      console.log(Script_Self);
    );

  )(jQuery);
</script>

<script>
  // Prevent Global Scope Pollution
  (function($)

    // The event will target me :(

  )(jQuery);
</script>

当您运行此代码时，您会意识到，第一个脚本会以自身为目标，并输出到控制台，以及以// The event will target me :( 注释为目标文档中的最终脚本。

原因是在事件之外，要添加到DOM的最后一个元素是执行指令的脚本标签，这在逻辑上意味着它在$('script')中的最后一个脚本标签。

但是，在事件内部，在本例中为 document.on('ready')，等待 DOM 完成加载，以便加载文档中可能存在的任何其他脚本标签，并替换所需的 .last() 目标。