一、节点之间的关系：？
节点之间的关系：
firstChild:第一个孩子
lastChild:最后一个孩子
parentNode:父节点
childNodes:子节点们
如果要表示第二个孩子：childNodes[1]
二、使用步骤
1.DOM下的节点属性和操作
代码如下（示例）：
<title>节点的增删改查</title> <script type="text/javascript"> function myc(){//查看 //根据id找到图片 var myi=document.getElementById("aa"); //根据属性名得到其属性值 // var mpath=myi.getAttribute("src"); // var mwidth=myi.getAttribute("width"); // alert(mwidth); } function myq(){//切换 //根据id找到图片 var myi=document.getElementById("aa"); //给属性名设置相应的属性值 myi.setAttribute("src","img/2.JPG"); } function myz(){//增加 //根据id找到图片 var myi=document.getElementById("aa"); //创建图片节点 var newImg=document.createElement("img"); //给图片赋值 src width newImg.setAttribute("src","img/3.JPG"); newImg.setAttribute("width","300px"); //把该图片插入到myi的前面 document.body.insertBefore(newImg,myi); } function myf(){//复制=克隆 //根据id找到图片 var myi=document.getElementById("aa"); //克隆节点 是否连同子节点一同克隆 var copyImg=myi.cloneNode(false); //追加到文档的最后面 document.body.appendChild(copyImg); } function mys(){//删除 //根据id找到图片 var myi=document.getElementById("aa"); //移除掉 document.body.removeChild(myi); } function myt(){//替换 //根据id找到图片 var oldImg=document.getElementById("aa"); //创建新的图片节点 var newImg=document.createElement("img"); //给该节点设置路径和宽度 newImg.setAttribute("src","img/2.JPG"); newImg.setAttribute("width","300px"); //用新的节点去替换旧的节点 document.body.replaceChild(newImg,oldImg); } </script> </head> <body> <img src="img/1.JPG" width="300px" id="aa" /> <input type="button" value="查看" οnclick="myc()"/> <input type="button" value="切换" οnclick="myq()"/> <input type="button" value="增加" οnclick="myz()"/> <input type="button" value="复制" οnclick="myf()"/> <input type="button" value="删除" οnclick="mys()"/> <input type="button" value="替换" οnclick="myt()"/> </body> </html>
1. getAttribute("属性名 src/id/name/width..."); 2. setAttribute("属性名","属性值") 3. 4. createElement()创建新的节点 5. removeChild()移除节点 6. replaceChild()替换节点 7. 8. insertBefore() 把...插入到...之前 9. appendChild() 追加到文档的最后面
2.JavaScript获取HTML DOM节点元素的方法的总结
在Web应用程序特别是Web2.0程序开发中，经常要获取页面中某个元素，然后更新该元素的样式、内容等。如何获取要更新的元素，是首先要解决的问题。令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结（以下方法在IE7和Firefox2.0.0.11测试通过）：
1. 通过顶层document节点获取
（1） document.getElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。
如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法，不过$()的功能更为强大，具体用法可以参考它们各自的API文档。
（2）document.getElementsByName(elementName)：该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
例如：在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可。
（3）document.getElementsByTagName(tagName)：该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组，例如：document.getElementsByTagName('A')将 会返回页面上所有超链接节点。在获取节点之前，一般都是知道节点的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞 大，这样就会浪费很多时间。那么，这个方法是不是就没有用处了呢？当然不是，这个方法和上面的两个不同，它不是document节点的专有方法，还可以应 用其他的节点，下面将会提到。
2、通过父节点获取
（1）parentObj.firstChild：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式，如此就可以获得更深层次的节点。
（2）parentObj.lastChild：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样，它也可以递归使用。
在使用中，如果我们把二者结合起来，那么将会达到更加令人兴奋的效果，即：parentObj.firstChild.lastChild.lastChild...
（3）parentObj.childNodes：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。
注意：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。
（4）parentObj.children：获取已知节点的直接子节点数组。
注意：经测试，在IE7上，和childNodes效果一样，而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
（5）parentObj.getElementsByTagName(tagName)：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。
3、通过临近节点获取
（1）neighbourNode.previousSibling：获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
（2）neighbourNode.nextSibling：获取已知节点（neighbourNode）的下一个节点，同样支持递归。
4、通过子节点获取
（1）childNode.parentNode：获取已知节点的父节点。
上面提到的方法，只是一些基本的方法，如果使用了Prototype等JavaScript库，可能还获得其他不同的方法，例如通过节点的class获取等等。不过，如果能够灵活运用上面的各种方法，相信应该可以应付大部分的程序。
3.Table中<thead>, <tbody> 和 <tfoot>的使用
<thead>, <tbody> 和 <tfoot>很少被用到，这是由于浏览器对它们的支持不太好。
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
如果使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
提示：在默认情况下这些元素不会影响到表格的布局。不过，可以使用 CSS 使这些元素改变表格的外观。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有 能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
其他效果如下所示。
代码 |
<table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table>
|
效果 |
1、表头、表体、表脚的划分
代码 |
<table width="250" border="1"> <thead> <tr> <th height="30"> </th> <th>苹果</th><th>桔子</th> </tr> </thead> <tbody> <tr> <td height="30">9.10</td> <td>30</td><td>60</td> </tr> <tr> <td height="30">9.11</td> <td>8</td><td>12</td> </tr> <tr> <td height="30">9.12</td> <td>14</td><td>9</td> </tr> </tbody> <tfoot> <tr> <th height="30">总计</th> <th>52</th><th>81</th> </tr> </tfoot> </table> |
|||||||||||||||
效果 |
|
|||||||||||||||
代码 |
<table width="250" border="1"> <thead style="background-color:#DDDDDD"> <tr> <th height="30"> </th> <th>苹果</th><th>桔子</th> </tr> </thead> <tbody align="center" style="background-color:#E0FFFF"> <tr> <td height="30">9.10</td> <td>30</td><td>60</td> </tr> <tr> <td height="30">9.11</td> <td>8</td><td>12</td> </tr> <tr> <td height="30">9.12</td> <td>14</td><td>9</td> </tr> </tbody> <tfoot style="color:green;background-color:#FFEFD5"> <tr> <th height="30">总计</th> <th>52</th><th>81</th> </tr> </tfoot> </table> |
|||||||||||||||
效果 |
|
说明：用<thead>、<tbody>、<tfoot>标签划分表格后不会有特殊的视觉效果，但可以把每一部份作为一个整体设置统一的格式。
2、只有表头横线的表格
代码 |
<table width="300" border="2" cellpadding="1" cellspacing="0" bordercolor="#000000" frame="hsides" rules="groups"> <thead align="center" valign="middle"> <tr> <th height="25">姓名</th><th>性别</th><th>年龄</th> </tr> </thead> <tbody align="center" valign="middle"> <tr> <td height="25">张三</td><td>男</td><td>25</td> </tr> <tr> <td height="25">李四</td><td>男</td><td>23</td> </tr> <tr> <td height="25">王五</td><td>男</td><td>21</td> </tr> </tbody> </table> |
||||||||||||
效果 |
|
说明：<thead>和<tbody>标签把表格按行分为两组，<table>标签的属性rules="groups"表示只显示组与组间的分界线，属性frame="hsides"表示只显示上下边框。
3、只有表头横线和列线的表格
代码 |
<table width="300" border="2" cellpadding="1" cellspacing="0" bordercolor="#000000" frame="hsides" rules="groups"> <colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup> <thead align="center" valign="middle"> <tr> <th height="25">姓名</th><th>性别</th><th>年龄</th> </tr> </thead> <tbody align="center" valign="middle"> <tr> <td height="25">张三</td><td>男</td><td>25</td> </tr> <tr> <td height="25">李四</td><td>男</td><td>23</td> </tr> <tr> <td height="25">王五</td><td>男</td><td>21</td> </tr> </tbody> </table> |
||||||||||||
效果 |
|
说明：<thead>和<tbody>标签把表格按行分为两组，三个<colgroup>标签把表格按列分为 三组，<table>标签的属性rules="groups"表示只显示组与组间的分界线，属性frame="hsides"表示只显示上下 边框。
4、有外框线和列线的表格
代码 |
<table width="300" border="2" cellpadding="1" cellspacing="0" bordercolor="#000000" frame="box" rules="groups"> <colgroup></colgroup> <colgroup span="2"></colgroup> <thead align="center" valign="middle"> <tr> <th height="25">姓名</th><th>性别</th><th>年龄</th> </tr> </thead> <tbody align="center" valign="middle"> <tr> <td height="25">张三</td><td>男</td><td>25</td> </tr> <tr> <td height="25">李四</td><td>男</td><td>23</td> </tr> <tr> <td height="25">王五</td><td>男</td><td>21</td> </tr> </tbody> </table> |
||||||||||||
效果 |
|
说明：<thead>和<tbody>标签把表格按行分为两组，两个<colgroup>标签把表格按列分为 两组，其中第二组占两列，<table>标签的属性rules="groups"表示只显示组与组间的分界线，属性frame="box"表 示显示外边框。
DOM动态操作表格：
table>row>cell
要对行操作 先找到表格 通过表格对行操作
tableObject.insertRow()/deleteRow()
要对列操作 先找到该行 通过行对其列操作
RowObject.insertCell()/deleteCell()
row.rowIndex:获得该行的行下标
要给表格的某列赋值：c0.innerHTML
总结
- 以上就是今天要讲的内容，DOM：文档对象模型（Document Object Model），将页面所有的内容表示为可以修改的对象，DOM是把「文档」当做一个「对象」来看待。
- <br/>文档对象模型（DOM）是W3C（万维网联盟）组织推荐的处理可扩展标记语言的标准编程接口，通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
- <br/>DOM 主要学习的是动态操作页面元素，顶级对象是 document。
