五、了解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>

如果要设置元素的CSS样式类型,要使用的是DOM属性className 而不是 HTML的class。

posted @ 2012-07-29 10:17  木饭  阅读(172)  评论(0编辑  收藏  举报