JS学习之动态加载script和style样式

前提:我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点"。我们都知道一个基本的网页格式是
<!DOCTYPE />
<head></head>
<body><body />
这些是最基本的形态,但是其实它省略了最外面的一个标签<document>.
<document>
<!DOCTYPE />
<head></head>
<body><body />
</document>
这其实才是它的本来面目(默认吧document标签给省略了)。是不是感觉有什么不一样的呢?这下子就好理解的多了。document.body 或者docment.head,无论你的什么操作只要是有关于这个<document>标签的你跟可以利用document获得,因为它是根。在看一下你所写的网页文档,记住任何存在<document>标签里面都是可以获得的,记得么 在节点类型中有document这种类型,所有的节点其实都是已经被分类好的,知识它们的nodeType和nodeName不一样而已(可以查一下资料"节点类型")。有点跑题,现在来看一下具体的代码(省略版的)如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//动态加载脚本
  
function loadScript(){
  
    var script=document.createElement("script");
  
    script.type="text/javascript";
  
    script.src=null
  
    try{
  
        script.appendChild(document.createTextNode("//code"));     //javascript内容是利用createTextNode创建的(不过IE不认这个)
  
    }catch(ex){
  
        script.text="//code";                                                                //IE认为SCRIPT节点是个特殊的节点所有有个特殊的text属性
  
    }
  
    document.body.appendChild(script);   /*兼容IE*/
  
}
  
  
  
样式的:
  
 
// 动态记载样式
  
function loadStyle(){
  
    var style=document.createElement("style");
  
    style.type="text/css";                                                              //参考网页上的style样式,它的属性设置成什么样的这里面也设成什么样的
  
    style.href="style.css";
  
    try{
  
       style .appendChild(document.createTextNode("//style code"));
  
    }catch(ex){
  
        style.styleSheet.styleText="//style code";    /*兼容IE*/        //IE也认为style节点是个特殊的节点所有有个特殊的styleSheet.styleText属性 - -
  
    }
  
    var head=document.getElementByTagName("head")[0];       
  
    head.appchild(link);
  
}   

  

posted @   岁月淡忘了谁  阅读(1060)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示