DOM编程:Document Object Model

最新推荐文章于 2024-11-13 17:26:18 发布

瑶大头*^_^*

最新推荐文章于 2024-11-13 17:26:18 发布

阅读量136

点赞数 4

分类专栏： javaScript专栏文章标签： python pandas 机器学习

本文链接：https://blog.csdn.net/qq_73126462/article/details/129760046

版权

javaScript专栏专栏收录该内容

7 篇文章 0 订阅

订阅专栏

DOM编程

文章目录

系列文章目录
一、节点之间的关系：
二、DOM下的节点属性和操作
- 1.JavaScript获取HTML DOM节点元素的方法的总结
- 2.Table中<thead>, <tbody> 和 <tfoot>的使用
总结

一、节点之间的关系：？

节点之间的关系：
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>

getAttribute("属性名 src/id/name/width...");
setAttribute("属性名","属性值")

createElement()创建新的节点
removeChild()移除节点
replaceChild()替换节点

insertBefore() 把...插入到...之前
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>

效果

苹果

桔子

9.10

30

60

9.11

8

12

9.12

14

9

总计

52

81

代码

<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>

效果

苹果

桔子

9.10

30

60

9.11

8

12

9.12

14

9

总计

52

81

说明：用<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>

效果

姓名

性别

年龄

张三

男

25

李四

男

23

王五

男

21

说明：<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>

效果

姓名

性别

年龄

张三

男

25

李四

男

23

王五

男

21

说明：<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>

效果

姓名

性别

年龄

张三

男

25

李四

男

23

王五

男

21

说明：<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。