2018-12-25
2018-12-25 本文已影响0人
kathyever
DOM操作技术
10.2.1 动态脚本
使用<script>元素向页面插入Javascript代码又两种方式：
1、通过src特性包含外部文件
2、用这个元素本身来包含代码
而这里要讨论的动态脚本，指的是在页面加载时不存在，但是将来的某一时刻通过修改DOM动态添加的脚本。
跟操作HTML元素一样，创建动态脚本也有两方法：
1、插入外部文件
<script type="text/javascript" src="client.js"></script>
2、直接插入Javascript
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script);
//在执行最后一行代码把<script>元素添加到页面中之前，是不会下载外部文件的。
也可以把这个元素添加到<head>元素中，效果相同。整个过程用函数来封装：
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
loadScript("client.js");//可以直接通过这个函数来加载外部的Javascript文件了
另一种指定Javascript代码的方式是行内方式：
<script>
function sayHi(){
alert("hi");
}
</script>
从逻辑上将，下面的DOM是有效的。
var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function sayHi(){alert('hi');}"));
//在IE中会导致错误。IE将<script>视为一个特殊的元素，不允许DOM访问其子节点
script.text = "function sayHi(){alert('hi');}";
//不过可以使用<script>元素的text属性来指定Javascript代码。
document.body = appendChild(script);
Safari3.0之前的版本虽然不能正确的支持text属性，但却允许使用节点技术来指定代码.
首先尝试标准的DOM文本节点方法，因为除了IE（在IE中会导致抛出错误），所有浏览器都支持这种方式。
如果这行代码抛出了错误，那么说明是IE，于是就必须使用text属性：
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);
}
loadScriptString("function sayHi(){alert('hi');}");//调用这个函数
以这种方式加载的代码会在全局作用域中执行，而且当脚本执行后将立即可用。
10.2.2 动态样式
与动态脚本类似，所谓动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中
把CSS样式包含到HTML页面的元素有两个：
1、<link>元素用于包含来自外部的文件
<link rel="stylesheet" type="text/css" href="styles.css">
2、<style>元素用于指定嵌入的样式
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href ="style.css";
var head = document.getElemenByTagName("head")[0];
head.appendChild(link);
必须要将<link>元素添加到<head>，而不是<body>元素，才能保证在所有浏览器中的行为一致
加载外部样式文件的过程是异步的，也就是加载样式与执行Javascript代码的过程没有固定的次序。
另一种定义样式的方式是使用<style>元素来包含嵌入CSS：
<style type="text/css">
body{
background-color:red;
}
</style>
与动态添加嵌入式脚本类似：
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
loadStyleString("body(background-color:red)");
这种方式会实时的向页面中添加样式，因此能够马上看到变化。
