DOM编程:Document Object Model

最新推荐文章于 2024-06-17 17:35:06 发布
最新推荐文章于 2024-06-17 17:35:06 发布
阅读量76 收藏
点赞数 4
分类专栏： javaScript专栏 文章标签： python pandas 机器学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73126462/article/details/129760046
版权

DOM编程

文章目录

一、节点之间的关系：？

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

 

总结

  1. 以上就是今天要讲的内容，DOM：文档对象模型（Document Object Model），将页面所有的内容表示为可以修改的对象，DOM是把「文档」当做一个「对象」来看待。
  2. <br/>文档对象模型（DOM）是W3C（万维网联盟）组织推荐的处理可扩展标记语言的标准编程接口，通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
  3. <br/>DOM 主要学习的是动态操作页面元素，顶级对象是 document。

瑶大头*^_^*
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
DOM（document object model）文档对象模型
10-12
本文概述DOM分类,document的方法以及属性、element的方法和属性document获取全局内容和创建全局内容，其中包括了节点属性和节点的相关方法和分类，本文结尾拓展了操作节点的方法和删除空文本节点的相关方法
什么是DOM(Document Object Model)文档对象模型
09-05
档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式
【随笔记录】document.createElement创建添加属性
文学超的博客
07-15 2万+
动态添加div中，需要进行添加id，class，style等属性 做下记录 var div = document.createElement('div'); div.id = 'mask_div1'; div.className = 'mask'; div.appendChild(document.createTextNode("test")); div.style.pos
js jquery给img的src属性赋值
信徒博客
03-25 1万+
html页面 <img src="" id="logo"/> js的普通赋值 document.getElementById("logo").src = "user.jpg"; Jquery赋值方法 $("#logo").attr('src',"user.jpg"); 取值 $("#imgId")[0].src; ...
js给<img>的src赋值
weixin_30838921的博客
06-05 3966
用js原生方法：document.getElementById("imageId").src = "xxxx.jpg";用Jquery方法：$("#imageId").attr("src","xxxx.jpg"); 注意：js原生方法和Jquery方法切记不可混用，比如： $("#imageId").src = "xxxx.jpg"; document.getElementById("ima...
js为img动态赋值
ccclych1的博客
04-29 7790
情景：当图片存储在数据库中，上传后立即回显 var url=path+"/user/img?photopath="+photopath; document.getElementById('photo').src=url; js原生方法：document.getElementById("photo").src = "xxxx.jpg"; Jquery方法：$("#photo").attr("s...
获取img的src 或者给img赋值
热门推荐
Todd Li的博客
04-25 2万+
获取：   $('userPhoto').attr('src')  $('userPhoto')[0].src赋值：$("#imageId").attr("src","xxxx.jpg")
一篇文带你了解文档对象模型DOM（Document Object Model）
cai niaoyihao_的博客
06-06 2604
一篇文带你了解文本对象模型DOM（Document Object Model）
DOM——文档对象模型（Document Object Model）
qq_20006765的博客
08-23 753
DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。
DOM(document Object model)
kui大师的博客
04-25 1516
DOM总结
DOM（Document Object Model，文档对象模型）
梦在哪里的博客
05-29 1263
DOM1. 历史2. 标准3. 应用程序3.1 Web浏览器3.2 JavaScript4. 实现4.1 布局引擎(Layout engines)4.2 库5. 参考文献 本文为译文，点击此处查看原文。 文档对象模型(DOM)是一个跨平台的、独立于语言的应用程序编程接口，它将XML文档视为树结构，其中每个节点都是表示文档一部分的对象。DOM表示具有逻辑树的文档。树的每个分支都以一个节点结束，每个节...
DOM对象（Document Object Model 文档对象模型）
/*多学习 不油腻*/
04-09 950
DOM是BOM中window对象的子对象，也是访问和操作HTML文档的入口。通过document对象，可以获取到HTML文档中的元素，并对其进行操作。 它将文档解析为一个由节点和对象组成的树状结构，可以使用这些对象，动态地访问和更新HTML文档的内容、结构和样式。
DOM-Document-Object-Model.rar_Java编程_Java_
08-12
很不错的doc面向对象模型，有心的朋友可以仔细阅读一下，有帮助的
DOM Scripting Web Design with JavaScript and the Document Object Model
10-01
DOM Scripting Web Design with JavaScript and the Document Object Model
GLM+vLLM 部署调用
qq_38915354的博客
06-13 1113
vLLM 框架是一个高效的大型语言模型（LLM）推理和部署服务系统
使用python库moviepy完成视频剪辑
weixin_42739473的博客
06-17 246
d.修改 moviepy/config_defaults.py 中的IMAGEMAGICK_BINARY的值为本地magic.exe的绝对路径。c.安装moviepy,使用命令 pip install moviepy。,安装完成后设置环境变量。
基于自编码器的心电图信号异常检测（Python）
weixin_39402231的博客
06-17 126
使用的数据集来自PTB心电图数据库，包括14552个心电图记录，包括两类：正常心跳和异常心跳，采样频率为125Hz。
第9章 类
最新发布
我走的每一步都算数
06-17 603
让一个类继承另一个类后，就可以添加区分子类和父类所需的新属性和新方法了。class Car:class ElectricCar(Car): # 继承Carself.battery = 85 # 新属性mycar = ElectricCar(2024, 'Au', 'A7') # 创建实例mycar.prt_battery() # 新方法熟悉Python 提供的选项，这样才能确定哪种组织方式是最佳的，并能理解别人开发的项目。
找出Python潜在的编程问题
svygh123的专栏
06-13 1042
Pylint 是一个非常强大的静态代码分析工具，主要用于检查 Python 代码的语法错误、代码风格问题以及潜在的编程错误。它是 Open Source Initiative 认证的开源软件，由 Logilab 团队开发维护。
document object model
05-12
文档对象模型（Document Object Model，简称DOM）是一种基于XML的文档结构表示方法，它把整个文档抽象成一个树形结构，每个节点都是一个对象，可以通过操作这些对象来改变文档的显示和内容。DOM提供了一种独立于平台...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瑶大头*^_^*

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值