- <!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>复习Dom操作</title>
-
<style type="text/css">
- #newTest
- {
- color:Red;
- }
-
</style>
-
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
-
<script type="text/javascript">
- // //jQuery写法--页面加载完成
- // $(document).ready(function () {
-
- // });
- // //可以简写成
- // $(function () {
- //
- // });
- //标准js中的写法 --页面加载完成
-
window.onload = function () {
-
-
var root = document.documentElement; //DOM根节点 --文档节点
-
var farDIV = document.getElementById("farther"); //根据ID获得DOM的“元素节点”
- //元素节点的一些常用的属性
- //document.getElementsByTagName("")//根据元素(标签)名称获得DOM的“元素节点”(可能是单个或一组)
- //document.getElementsByName("")//根据name属性获得DOM的“元素节点”(可能是单个或一组)
-
var idNode = farDIV.getAttributeNode("id"); //获得属性为id的“属性节点”
- //注意：不要把 getAttribute("id")和getAttributeNode("id")搞混了，前者获取的是属性的值，后者获取的属性节点
-
var textNode = farDIV.firstChild; //farDIV的第一个子节点
-
- //DOM中常用的属性
- //属性（其实只在属性节点中定义才有效）
- //farDIV.attributes;//返回该节点的所有属性对象的数组
- //节点名称
- // alert(root.nodeName + ":" + farDIV.nodeName + ":" + idNode.nodeName + ":" + textNode.nodeName);
- //nodeType(不支持IE)有五种，分别代表：标签(元素)节点，属性节点，文本节点，根节点，注释节点
- //alert(root.nodeType + ":" + farDIV.nodeType + ":" + idNode.nodeType + ":" + textNode.nodeType);
- //节点值
- //alert(root.nodeValue + ":" + root.nodeValue + ":" + idNode.value + ":" + textNode.nodeValue);
-
- //根节点的一些常用属性 -- 创建新节点
-
var newNode = document.createElement("div"); //创建一个div节点
-
var text = document.createTextNode("这是我手动创建的"); //创建一个文本节点
- newNode.appendChild(text); //将文本节点插入div节点中
-
var attrNode = document.createAttribute("id"); //创建属性节点，属性名为“id”
- newNode.setAttributeNode(attrNode); //将newNode节点的属性节点设置为attrNode
- newNode.setAttribute("id", "newTest"); //设置newNode节点的id属性设置为newTest
-
//var comment = document.createComment("我是注释");//创建注释节点
-
- //获取页面中的body标签所在节点
-
var body = root.lastChild; //获取root的最后一个子节点
- body.appendChild(newNode); //将新建的节点插入body中
- //如果添加成功，则CSS会生效（字体变红，ID选择器有效）
-
- //获取元素的属性 alert(farDIV.id); alert(farDIV.getAttribute("id"));
- alert(newNode.getAttribute("id")); //HTML中获取节点的属性 -- 在XHTML中的可以简写 ：alert(newNode.id); //
-
- //动态的创建表格
- //1.可以使用与上面类似的方式，创建节点、拼接、插入... 但是这样操作似乎很麻烦
- //2.可以使用更加简单的操作方式
-
-
- };
-
</script>
-
</head>
-
<body>
-
<div id="farther">我是父div</div>
-
</body>
-
</html>