JavaScript DOM操作
DOM(文档对象模型) 是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树。
节点层次
<html>
<head>
<title>Hello
</title>
</head>
<body>
<p>Hello World!
</p>
</body>
</html>
可以将这个简单的HTML文档标识为一个层次结构。文档节点是每个文档的根节点，
文档节点只有一个子节点，即<html>元素,我们称之为文档元素。
DOM操作技术
很多时候,DOM操作都比较简明, 因此用JavaScript生成哪些原本是用HTML代码生成的内容并不麻烦.
不过,也有些时候,操作DOM并不像看起来那么简单, 由于浏览器中充斥着隐藏的陷阱和不兼容问题,
用JavaScript代码处理DOM 的某些部分要比处理其他部分更复杂一些。
动态脚本 使用< script >元素可以向页面插入JavaScript代码, 一种方式是通过其src特性包含外部文件,另一种方式就是用这个元素本身来包含代码. 而动态脚本指的是页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. 例如:
var script
= document
.createElement('script');
script
.type
= 'text/javascript';
script
.src
= 'test.js';
document
.body
.appendChild(script
);
var script
= document
.createElement('script');
script
.type
= 'text/javascript';
script
.appendChild(document
.createTextNode('function sayHi() {alert('Hello
');}'));
document
.body
.appendChild(script
);
var script
= document
.createElement('script');
script
.type
= 'text/javascript';
var code
= 'function sayHi() {alert('Hello
');}';
try {
script
.appendChild(document
.createTextNode(code
);
} catch {
script
.text
= code
}
document
.body
.appendChild(script
);
动态样式 能够把CSS样式包含到HTML页面中的元素有两个, 其中,< link >元素用于包含来自外部的文件,而< style >元素用于指定嵌入的样式,与动态脚本类似,所谓动态样式是指在页面刚加载时不存在的样式, 动态样式是在页面加载完成后动态添加到页面中的. 例如:
var link
= document
.createElement('link');
link
.ref
= 'stylesheet';
link
.type
= 'text/css';
link
.href
= 'style.css';
var head
= document
.getElementsByTagName('head')[0];
head
.appendChild(link
);
var style
= document
.createElement('style');
style
.type
= 'text/css';
style
.appendChild(document
.createTextNode('body{background-color:red}'));
var head
= document
.getElementsByTagName('head')[0];
head
.appendChild(style
);
var style
= document
.createElement('style');
style
.type
= 'text/css';
try{
style
.appendChild(document
.createTextNode('body{background-color:red}'));
} catch {
style
.styleSheet
.cssText
= 'body{background-colr:red}';
}
var head
= document
.getElementsByTagName('head')[0];
head
.appendChild(style
);
