文章目录

• 1.DOM编程
• • 1.1动态脚本
  • 1.2动态样式
  • 1.3 使用 NodeList

1.DOM编程

1.1动态脚本

<script src="foo.js"></script>

如果想要向网页中动态添加上述语句，可以这样写：

let script = document.createElement("script"); 
script.src = "foo.js"; 
document.body.appendChild(script);

//封装成函数
function loadScript(url) { 
 let script = document.createElement("script"); 
 script.src = url; 
 document.body.appendChild(script); 
}

如果想要动态插入JavaScript代码，例子如下：

//要插入的代码
<script> 
 function sayHi() { 
 alert("hi");
  } 
</script>

//dom实现
let script = document.createElement("script"); 
script.appendChild(document.createTextNode("function sayHi(){alert('hi');}")); 
document.body.appendChild(script);

除此之外，script还包含了一个text属性。
因为IE不兼容上面的代码，所以可以这样写：

function loadScriptString(code){ 
 var script = document.createElement("script"); 
 script.type = "text/javascript"; 
 try { 
 script.appendChild(document.createTextNode(code)); 
 } catch (ex){ 
 script.text = code; 
 } 
 document.body.appendChild(script); 
}

1.2动态样式

创建：

let link = document.createElement("link"); 
link.rel = "stylesheet"; 
link.type = "text/css"; 
link.href = "styles.css"; 
let head = document.getElementsByTagName("head")[0]; 
head.appendChild(link);

也可以添加代码：

let style = document.createElement("style"); 
style.type = "text/css"; 
style.appendChild(document.createTextNode("body{background-color:red}")); 
let head = document.getElementsByTagName("head")[0]; 
head.appendChild(style);

在部分浏览器可以不执行，可以沿用script的方法

1.3 使用 NodeList

因为NodeList对象是“实时的”，所以要注意死循环，例子：

let divs = document.getElementsByTagName("div"); 
for (let i = 0; i < divs.length; ++i){ 
 let div = document.createElement("div"); 
 document.body.appendChild(div); 
}

可以改动一下定义一个len

let divs = document.getElementsByTagName("div"); 
for (let i = 0, len = divs.length; i < len; ++i) { 
 let div = document.createElement("div"); 
 document.body.appendChild(div); 
}