五、了解DOM
core DOM
xml DOM
html DOM
DOM是一个文档树,根节点是HTML元素。
documentElement的属性就表示HTML对象;
firstChild,lastChild 一般就是head和body。
获取元素有方法:
1、getElementById 只能通过document对象调用。
2、getElementsByName 一般只有获取表单时候才用。获取一组元素。
3、getElementsByTagName 通过元素名称获取一组元素。
下面是通过DOM操作HTML元素,动态创建一个div。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
function onLoad() {
var oHtml = document.documentElement;
var oBody = oHtml.lastChild;
var oDiv = document.createElement("div");
var oText = document.createTextNode("Hello DOM");
oDiv.appendChild(oText);
oBody.appendChild(oDiv);
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
function onLoad() {
var oHtml = document.documentElement;
var oBody = oHtml.lastChild;
var oDiv = document.createElement("div");
var oText = document.createTextNode("Hello DOM");
oDiv.appendChild(oText);
oBody.appendChild(oDiv);
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
如果要设置元素的CSS样式类型,要使用的是DOM属性className 而不是 HTML的class。