Javascript的script标签中的id属性

最新推荐文章于 2025-07-09 17:29:11 发布
转载 最新推荐文章于 2025-07-09 17:29:11 发布 · 2.3w 阅读 · 3

本文介绍如何利用HTML中script标签的ID属性来管理页面上的JavaScript资源，并提供了一个示例脚本，用于动态加载多个JS文件，提高网页加载效率。

首先，和普通的html标签一样，script也是可以作为html元素来处理的，而Dom的节点都是可以有id属性的；

其实，script中的id还是有用的，比如如果页面需要加载的JS文件过多，那样最好是写一个JS文件用来加载这些JS文件，比如可做如下参考：

[javascript]  view plain  copy
  1. require: function(libraryName){  
  2.        document.write('<script type="text/javascript" src="'+libraryName+'"></script>');  
  3.     },//动态加载JS文件  
  4.   
  5. load: function(){  
  6.         var cr_scripts = new Array();  
  7.         var scriptObjects = document.getElementsByTagName("script");  
  8. //这里是通过ByTagName取得script的 当然也可以通过id来取  
  9.           
  10.         for(var i = 0; i < scriptObjects.length; i++)  
  11.         {  
  12.             var s = scriptObjects[i];  
  13.               
  14.                var path = “”                                 
  15.                cr_scripts = cr_scripts.concat([   
  16.                     path + "js/prototype.js",  
  17.                     path + "js/utility/utility.js",  
  18.                     path + "js/webclient.js",  
  19.                     path + "js/nrcap2sdk.js",  
  20.                     path + "js/combobox.js",  
  21.            path + "js/c7web_combobox.js",  
  22.                     path + "js/slider.js",  
  23.                     path + "js/range.js",  
  24.                     path + "js/timer.js"  
  25.                 ]);   
  26.                }          
  27.              
  28.           
  29.              
  30.         for(var j = 0;j < cr_scripts.length;j++)  
  31.         {     
  32.             _sl.require(cr_scripts[j]);  
  33.         };    
  34.           
  35.     },  

 

 

示例应用

<dl class="code"></dl>   py
[javascript]  view plain  copy
  1. <script id="Temp" language="JavaScript" type="text/javascript" defer>  
  2.   
  3.     Temp.src = "try.php?include=first.php"；   
  4.   
  5. /script>  
  6.   
  7. js解析，处理成script的src属性的值为"try.php?include=first.php"，即：src="try.php?include=first.php"  
  8.   
  9. <script id="scr"></script><script>   
  10.   
  11.     document.getElementById('scr').src='try.php?include=first.php';  
  12.   
  13. </script>  


 

 

javascript标签的id属性
仰望者！
12-25 737
转：http://countme.iteye.com/blog/1143778 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="...
Js的script标签中的id作用
liuzx32的专栏
07-21 7557
首先，和普通的html标签一样，script也是可以作为html元素来处理的，而Dom的节点都是可以有id属性的； 其实，script中的id还是有用的，比如如果页面需要加载的JS文件过多，那样最好是写一个JS文件用来加载这些JS文件，比如可做如下参考： require: function(libraryName){ document.write(''); },//动
彻底弄懂＜script＞标签
最新发布
顺其自然~专栏
07-09 515
当我们访问该页面的时候，在页面加载过程中，页面首先遇到了一个h1标签，然后才遇到了一个script标签，同样会去加载服务器。，然后根据对应的src地址向服务器发起请求，当对应的javascript脚本加载完成后，HTML页面仍然不能加载，，阻塞时间为8秒，而5秒后test脚本加载完成，此时会立即执行该脚本，该脚本执行会输出当前已加载h1标签的个数，当我们访问该页面的时候，在页面加载过程中，页面首先遇到了一个script标签，并去加载服务器。，8秒后deferHTML脚本加载完成，继续加载HTML页面，
<script id="tp" type="text/html">,demo.html
weixin_26875051的博客
07-21 335
20-就业率85%{{each arr value index }}{{@ value.img}}{{value.name}}{{/each}}{{each arr value index }}{{@ value.productImgSm}}{{value.productName}}{{/each}}$.get("http://193.112.55.79:9090/api/getmoneyctrl...
script中获取不到元素id
weixin_34087503的博客
12-11 409
<head><script type="text/javascript"> function getchange(){ var date = new Date(); var sec = date.getSeconds(); var spanNode = document.getElementById("time"); spanNode....
JavaScript动态添加css样式和script标签
12-10
在这个示例中，`<script>`元素的`type`属性被设置为"text/javascript"，表示这是一个JavaScript脚本。`src`属性指定了外部JavaScript文件的路径。当`<script>`标签被添加到`<head>`或`<body>`后，浏览器会异步下载...
Javascript获取标签ID改变style属性的代码
12-10
实例JavaScript代码 下面的这段代码中，我们通过select元素的name属性来设置具体要访问style的哪个属性（本例中为背景色），这样，这个函数就可以用来设置不同的CSS属性了。 代码如下: [removed] var d = document....
javascript中innerText和innerHTML属性用法实例分析
12-10
在JavaScript中，`innerText` 和 `innerHTML` 是两个非常重要的属性，它们用于处理HTML元素中的文本内容和HTML结构。这两个属性在DOM（文档对象模型）中广泛使用，可以帮助开发者读取或修改页面上的文本和HTML元素。...
javascript和jquery修改a标签的href属性
10-26
要修改 a 标签的 href 属性，我们可以使用 `getElementById` 方法来获取特定 ID 的元素，然后通过 `setAttribute` 或直接访问其 `href` 属性来修改它。以下是具体的代码示例： ```javascript // 使用 setAttribute ...
javascript的document中的动态添加标签实现方法
11-30
注意，`id`属性必须唯一，因此在示例中使用`id1`。 10. **动态删除输入元素**： `deleteinput`函数展示了如何删除指定ID的`<input>`元素，但这种方法不适用于动态添加的元素，因为它假设我们知道要删除的元素的ID...
js:script标签的id非兼容属性,不建议使用
我的笔记
04-09 1069
由于某种原因,需要得到载入本js文件的绝对路径,但是又不能在js文件中写死,比如一个js文件,放在不同域的的服务器中使用,这时就不能写死;本来想使用id来获取,但是发现firefox中动态创建出来的script,id并没有出现,就说明ff是直接忽略掉此属性,考虑兼容就无法使用了.想使用id来替换js想法变成了必须给script再包上一个i标签,并写上id,再innerHTML来替换它.
Linux脚本练习之script057-查出用户 UID 最大值的用户名、 UID 及 shell 类型。
二木成林
06-10 786
查出用户 UID 最大值的用户名、 UID 及 shell 类型。
用script标签加载
weixin_34129696的博客
10-29 195
此文已由作者杨帆授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。注：经过更深入的测试，实在不好意思，这篇文章是有问题的 更改script的type属性 并不能通过src来加载，只能在该文件中解析。 requirejs 的text原理是通过XHR载入的)测试如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;...
javascript 中的id 和class
weixin_45470563的博客
03-05 265
这些超链接都使用了相同的 `id="ui"`，但实际上在HTML规范中，`id` 应该是唯一的。如果多个元素需要共享某个标识，应该使用 `class` 而不是 `id`。`id="ui"` 是这些超链接的标识符，但由于 `id` 应该是唯一的，建议将这些超链接的 `id` 改为 `class="ui"` 以符合HTML规范。在提供的HTML代码中，多个超链接元素使用了 `id="ui"`。`id` 是 HTML 元素的唯一标识符，用于区分页面中的不同元素。
【尚硅谷 Java Web 笔记】id选择器
qq_54110690的博客
01-30 912
id选择器，可以让我们通过id属性选择性的去使用这个样式。 格式： #id 属性值{ 属性:值; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id选择器</title> <style type="...
前端开发脚本语言jQuery或JavaScript中class和id的引用方法
qq_44165157的博客
07-23 960
引用classname： $(".work_num") .(classname) 引用idname： $("#work_num") #(idname) 说明： 两中引用效果相同； id和class的使用有什么区别 1、使用范围不同： CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。ID属性的操作类似于CLASS属性，ID属性的值在整篇文档中必须是唯一的。 2、表示方法不同： CLASS类选择器以标志符（句点）开头，用于指示后面.
js动态添加id
weixin_30486037的博客
04-13 2691
<script type="text/javascript"> function add_id(){ var dlall=document.getElementsByTagName('div'); for(i=0;i<dlall.length;i++){ dlall[i].id='id_'+i; } } window.onload=add_id; &...
设置动态id,并进行函数操作
ChaudementWu的博客
10-18 1672
一.div代码如下：                             /goods/image/good.png" onclick="clickpraise('${goodspraise.get(i.index).goodsId}','${i.index}');">${goodspraise.get(i.index).praiseNum}
javascript语句只能在script标签中执行码
06-02
<think>好的，我需要回答用户的问题：“JavaScript语句是否必须放在script标签中执行？”用户还提供了四个站内引用，我需要结合这些引用内容来构建答案。首先，我应该明确问题核心：是否只有在<script>标签内的JavaScript才能执行？根据我的知识，JavaScript可以通过多种方式执行，比如外部文件、事件属性、URL协议等，但需要确认引用中的内容是否支持这些情况。 查看引用内容： 引用[1]给出了一个HTML示例，其中<script>标签内嵌了alert语句，说明在浏览器中确实需要script标签来包含代码。引用[2]提到使用type="module"来引入模块，这也属于script标签的使用。引用[3]指出JavaScript可以放在HTML的任何位置，但浏览器按顺序解释，这里强调的还是script标签内的代码。引用[4]中的例子同样是在script标签内的事件处理函数。不过用户的问题是想知道是否“必须”在script标签中执行。根据我的知识，还有其他方式，比如事件处理属性（如onclick）、JavaScript URL协议（javascript:），以及外部文件通过src属性引入，但外部文件还是通过script标签的src，所以本质上还是离不开script标签。不过事件处理属性如onclick="alert('hi')"虽然写在HTML属性里，但严格来说，这部分代码还是属于script标签的上下文吗？或者属于HTML属性内的脚本？ 根据引用[3]，提到脚本可以放在任何位置，但都是指在script标签内。但用户可能想知道是否存在不依赖script标签的情况，比如直接在HTML属性中写JS代码，比如：<buttononclick="console.log('Clicked')">Click</button>这里的onclick属性中的代码是否算作不在script标签中的执行？这可能需要解释，虽然代码写在HTML属性中，但实际执行时仍然是JavaScript，并且这种方式并不需要显式的script标签包裹整个代码块，但属于内联事件处理程序。 此外，引用[2]提到使用type="module"来引入模块，这也属于script标签，但进一步说明了模块化的用法。而引用[4]中的例子是在script标签内的事件处理函数，所以仍然在script标签内。所以，综合来看，用户的问题答案应该是：不一定必须，可以通过其他方式如事件属性或URL协议执行，但主要执行环境还是依赖于script标签，无论是直接嵌入还是外部引入。此外，引用中提到的内容是否支持这一点？ 引用[3]提到脚本可以放在任何位置，但都是指在script标签内。而事件处理属性中的代码可能属于例外情况，但严格来说，这些代码是作为HTML属性值存在的，而不是独立的脚本块。这时候需要明确说明这两种情况：显式的script标签和隐式的HTML事件属性中的代码。 另外，用户提供的引用[4]中的例子，事件处理函数是在script标签内定义的，所以可能没有涵盖内联事件处理的情况。因此，在回答中需要指出，虽然大多数情况下需要script标签，但像事件处理属性或javascript:URL这样的方式也可以执行JS语句，而无需显式的script标签。因此，回答的结构应该是：1.主要方式：script标签内（直接嵌入或外部引入）2.其他方式：HTML事件属性（如onclick）、javascript:URL协议3.引用支持的内容：引用[1][2][3]都涉及script标签的使用，而引用[4]中的例子是在script标签内的事件处理，但可能用户需要知道其他方式是否存在。需要确保回答正确，并引用相关引用。例如，引用[3]提到脚本可以放在任何位置，但前提是放在script标签内，而事件属性中的代码可能不在script标签内。因此，需要区分这两种情况。 此外，引用[2]提到模块需要type="module"，这也是script标签的一种使用方式，进一步说明script标签的必要性。但事件属性中的代码是否需要script标签？答案是不需要，因为它们是直接写在HTML元素属性中的。因此，总结回答：JavaScript语句通常需要在script标签中执行，但也可以通过HTML事件属性和javascript:URL等方式执行，不过这些方式的使用场景有限。接下来需要组织语言，确保引用适当，例如引用[3]说明script标签的位置影响执行顺序，引用[2]说明模块需要特定type的script标签，引用[1]中的示例展示script标签内的代码，而引用[4]中的事件处理函数虽然写在script标签内，但实际应用中可以分开。可能的问题点：用户是否认为事件属性中的代码属于script标签外？是的，因为这些代码是作为属性值存在的，而不是在<script>标签内部。因此，这种情况下，JavaScript语句并不在script标签中，但仍然是有效的执行方式。因此，在回答中需要明确说明这两种情况，并引用相关的内容。例如，引用[3]提到脚本的位置，但未涉及事件属性，所以可能需要结合自己的知识补充，同时引用中的例子是否有涉及？例如，引用[4]中的例子是在script标签内定义事件处理函数，而如果用户想了解的是直接在HTML元素中的事件属性，比如： <button onclick="alert('Hello')">Click</button>这种情况下，JS代码是在onclick属性中，而不是在script标签内。因此，这种情况属于不在script标签中执行的情况。因此，需要指出这种情况的存在，并说明其属于另一种执行方式。因此，最终答案的结构应该是：-主要执行方式：script标签内（直接嵌入或外部引入）-其他方式：HTML事件属性、javascript:URL-注意事项：模块需要type="module"，执行顺序依赖位置（引用[3]）同时，引用中的内容需要正确对应。例如，引用[1]中的例子是script标签内的代码，引用[2]说明模块需要script标签的type属性，引用[3]说明script标签的位置影响执行顺序，引用[4]中的例子虽然是在script标签内定义事件处理函数，但展示了JS代码的执行顺序问题。 因此，在回答中需要明确指出，虽然大多数情况下JS在script标签中执行，但存在其他方式，但它们的应用场景有限，并且可能涉及不同的执行机制。同时，引用[3]提到script标签的位置影响执行顺序，但未涉及其他执行方式，所以需要结合其他知识进行补充。最后，生成相关问题，比如关于事件属性执行JS的安全性，或者模块化的使用等。</think>### JavaScript语句的执行位置分析 JavaScript语句**并非必须**在`<script>`标签中执行，但**主要执行环境**仍依赖该标签。以下是具体分析： --- #### 一、主要执行方式：`<script>`标签 1. **内嵌脚本** 直接在HTML文件中使用`<script>`标签包裹代码，这是最常见的执行方式[^1][^3]： ```html <script> alert("内嵌脚本执行"); </script> ``` 2. **外部脚本引入** 通过`src`属性引入外部`.js`文件，需注意模块化脚本需添加`type="module"`[^2]： ```html <script src="app.js"></script> <!-- 模块化脚本 --> <script type="module" src="module.js"></script> ``` --- #### 二、其他执行方式 1. **HTML事件属性** 直接在HTML元素的**事件属性**（如`onclick`、`onload`）中编写代码： ```html <button onclick="console.log('通过事件属性执行');">点击</button> ``` 此时代码直接作为属性值存在，无需`<script>`标签包裹。 2. **JavaScript URL协议** 在浏览器地址栏或`<a>`标签的`href`中使用`javascript:`协议： ```html <a href="javascript:alert('通过URL协议执行')">执行JS</a> ``` --- #### 三、注意事项 1. **执行顺序依赖位置** `<script>`标签的位置会影响代码执行顺序。例如，操作DOM的代码需确保DOM已加载[^3]： ```html <body> <div id="content"></div> <script> document.getElementById("content").innerHTML = "内容已加载"; </script> </body> ``` 2. **模块化限制** 使用`import/export`语法时必须通过`type="module"`声明模块[^2]。 3. **异步代码的执行** 如`setTimeout`或事件回调中的代码，虽然触发时机可能延迟，但初始定义仍需在`<script>`标签或外部脚本中[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值