JavaScript 的 DOM 技术
文章目录
前言
通过 JavaScript 的 DOM 技术，可以实现用户与浏览器页眉的实时动态交互，以及页面元素的实时更新。算是从开发静态页面跳跃到了开发动态交互页面的提升了。
一、DOM 技术是什么？
DOM 技术是 Document Object Model（文档对象模型）的简称，是表示文档（如 HTML 文档）和访问、操作构成文档的各个要素（如 HTML 标记和文本串）的应用程序接口（API）。它提供了文档中独立元素的结构化、面向对象的表达方式，并允许通过对象的属性和方法访问这些对象。
总而言之，开发者可以通过 DOM 技术来动态地访问和修改网页的内容、结构和样式。
二、DOM 技术的使用
1.DOM 的分层结构
在 DOM 中，文档的层次结构以树的形式表示，特殊的是树根在上，树枝在下，每个节点表示文档中的内容。（该文中元素和节点两个词是一个东西）
Document 对象的层次结构树状图如下所示（更多的兄弟节点没有展示出来）：
梳理一下该树状图中各个节点之间的关系：
（1）在树形结构中，直接位于一个节点之下的节点被称为该节点的子节点（ child ）。
（2）直接位于一个节点之上的节点被称为该节点的父节点。( father )
（3）位于同一层次，具有相同父节点的节点是兄弟节点。( sibling )
（4）一个节点的下一个层次的节点集合是该节点的后代。（ descendant ）
（5）一个节点的父节点，祖父节点以及其他所有位于该节点之上的，都是该节点的祖先。（ ancestor ）
实操：写一个简单的 HTML 文档说明 DOM 的分层结构。
<html>
<head>
<title> test </title>
</head>
<body>
这是一个测试网站
<br>
<a href="https://blog.csdn.net/weixin_74141222?type=blog"> https://blog.csdn.net/weixin_74141222?type=blog </a>
</body>
</html>运行结果：
以上的代码完全展示出了 HTML 文档的 DOM 分层结构。
2.遍历文档
在 DOM 中，HTML 文档中的各个节点被视为各种类型的 Node 对象，并且将 HTML 文档表示为 Node 对象的树。对于任意一个树形结构来说，都可以实现遍历树。DOM 中最常用的遍历树的属性有 parentNode、firstNode、nextNode、lastNode、previousSibling。
| 属性 | 功能描述 | 类型 |
| parentNode | 节点的父节点，没有父节点时为 null | Node |
| childNode | 节点的所有子节点的 NodeList | NodeList |
| firstChild | 节点的第一个子节点，没有则为 null | Node |
| lastChild | 节点的最后一个子节点，没有则为 null | Node |
| previousSibling | 节点的前一个兄弟节点，没有则为 null | Node |
| nextSibling | 节点的下一个兄弟节点，没有则为 null | Node |
| nextChild | 节点的下一个子节点，没有则为 null | Node |
| nodeName | 节点名 | String |
| nodeValue | 节点值 | String |
| nodeType | 表示节点类型的整型常量 | Short |
由于 HTML 文档开发复杂混乱，DOM 定义了 nodeType 来表示节点的类型。下面的展示 Node 对象的节点类型、节点名、节点值以及节点类型常量。
| 节点类型 | 节点名 | 节点值 | 节点类型常量 |
| Attr | 属性名 | 属性值 | ATTRIBUTE_NODE(2) |
| CDATASection | #cdata-section | CDATA 段内容 | CDATA_SECTION_NODE(4) |
| Comment | #comment | 注释的内容 | COMMENT_NODE(8) |
| Document | #document | null | DOCUMENT_NODE(9) |
| DocumentFragment | #document-fragment | null | DOCUMENT_FRAGMENT_NODE(11) |
| DocumentType | 文档类型名 | null | DOCUMENT_TYPE_NODE(10) |
| Element | 标记名 | null | ELEMENT_NODE(1) |
| Entity | 实体名 | null | ENTITY_NODE(6) |
| EntityReference | 引用实体名 | null | ENTITY_REFERENCE_NODE(5) |
| Notation | 符号名 | null | NOTATION_NODE(12) |
| ProcessInstruction | 目标 | 除目标以外的所有目标 | PROCESS_INSTRUCTION_NODE(7) |
| Text | #text | 文本节点内容 | TEXT_NODE(3) |
实操：遍历 JSP 文档中的所有标记，并且将总数和标记内容都罗列出来。
<script>
var elementList=""; //全局变量，保存 Element 标记名。
function getElement(node){ //参数 node 是一个 Node 对象
var total=0;
if(node.nodeType==1){ //若 node 对象是我们保存 Element 对象则返回 1
total++; //计数器加 1
elementList=elementList+node.nodeName+"、"; //保存标记名
}
var childrens = node.childNode; //获取 node 的全部子节点
for(var m=node.firstChild;m!=null;m=m.nextSibling){
total +=getElement(m); //对每个子节点进行递归操作
}
return total;
}
function show(){
var number=getElement(document); //获取标记总数，document 是全局变量
elementList=elementList.substring(0,elementList.length-1); //去除结尾多余的 、
alert("该文档中包含："+elementList+"等标记。\n总共"+number+"个标记！");
elementList="";
}
</script>运行结果：
3.获得文档中的指定元素
既然可以获取文档的所有元素，那么也可以获取到指定的元素。直接搜索文案中指定元素有两种。
（1）通过元素的 ID 属性获取元素
使用 Document 对象的 getElementsById() 方法可以通过元素的 ID 属性获取元素。
实操：获取文档中 ID 属性为 form1 的节点。
document.getElementById("form1");（2）通过元素的 name 属性获取元素
使用 Document 对象的 getElementsByName() 方法可以通过元素的 Name 属性获取元素。
document.getElementByName("form1")[0];与 getElementId() 方法不同的是，该方法返回的是一个数组。若想通过 name 属性获取到页面唯一的元素，可以通过返回数组中下标值为 0 的元素进行获取。
4.操作文档
既然已经可以获取元素了，那么我们就能对这些元素进行操作了。就像是数据库一样，可以对这些元素进行创建、插入、删除和替换等操作。这些操作都是通过 Node 节点对象提供方法来实现的。
| 方法 | 功能描述 |
| insertBefore(newChild,refChild) | 在现有节点 refChild 之前插入节点 newChild |
| replaceChild(newChild,oldChild) | 将子节点列表中的子节点 oldChild 换成 newChild，并返回 oldChild 节点（返回值是为了替换后对原替换操作保留痕迹） |
| removeChild(oldChild) | 将子节点列表中的子节点 oldChild 删除，并返回 oldChild 节点（返回值是为了替换后对原替换操作保留痕迹） |
| appendChild(newChild) | 将节点 newChild 添加到该节点的子节点列表末尾。若 newChild 已在树中，则先将其删除 |
| hasChildNodes() | 返回一个布尔值，表示该节点是否有子节点 |
| cloneNode(deep) | 返回这个节点的副本（包括属性）。deep 值为是否执行深度拷贝，为 true 则复制该节点及它的所有后代节点，否则只复制这个节点 |
实操：模拟百度贴吧，水友们在贴吧下，可以发评论，删评论的页面。
第一步：HTML中，创建一行两列的表格用于显示水贴和评论列表。再在下方添加一个用于收集评论信息的表单以及表单元素，可以输入评论人名称和评论内容，负责发布评论和删除评论（发布按钮和删除按钮都加上）。
<head>
<title> 橘喵贴吧 </title>
<style>
table {
width: 600px;
border-collapse: collapse;
margin: auto;
}
th, td {
border: 1px solid #FFFFFF;
padding: 10px;
text-align: center;
background-color: #E5BB93;
}
tbody tr:nth-child(even) {
background-color: #F2F2F2;
}
</style>
</head>
<body>
<center>
<table id="comment">
<thead>
<tr>
<th width="20%">评论人</th>
<th width="82%">评论内容</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td colspan="2" align="center">
<img src="profile.jpg" alt="Description of Image" width="100" height="100" style="vertical-align: middle;"/>
<span style="vertical-align: middle; margin-left: 10px;">汤师爷，咱吃着火锅唱着歌，怎么就被麻匪给劫了？上任鹅城！</span>
</td>
</tr>
</tbody>
</table>
<form name="form1" method="post" action="">
评论人：<input name="person" type="text" id="person" size="56"/><br>
评论内容：<textarea name="content" cols="60" rows="6" id="content"></textarea>
</form>
<input name="Button" type="button" class="btn_grey" value="发布" onclick="addElement()">
<input name="Button" type="button" class="btn_grey" value="删除一楼评论" onclick="deleteFirstE()">
<input name="Button" type="button" class="btn_grey" value="删除最后一楼评论" onclick="deleteLastE()">第二步，在 script 标记中创建自定义的 addElement() 方法、deleteFirstE() 方法、deleteLastE() 方法用于按钮的 onclick() 调用，实现添加评论，删除评论。
<script>
function addElement() {
var person = document.createTextNode(form1.person.value);
var content = document.createTextNode(form1.content.value);
var tbody = document.getElementById("tbody");
var tr = document.createElement("tr");
var td_person = document.createElement("td");
var td_content = document.createElement("td");
td_person.appendChild(person);
td_content.appendChild(content);
tr.appendChild(td_person);
tr.appendChild(td_content);
tbody.appendChild(tr);
form1.person.value = "";
form1.content.value = "";
}
function deleteFirstE() {
var tComment = document.getElementById("tbody");
if (tComment.rows.length > 1) {
tComment.deleteRow(1);
}
}
function deleteLastE() {
var tComment = document.getElementById("tbody");
if (tComment.rows.length > 1) {
tComment.deleteRow(tComment.rows.length - 1);
}
}
</script>运行结果：
总结
以上就是 JavaScript 的 DOM技术，本文简单介绍了 DOM 技术对页面开发的动态交互，而DOM技术是一种强大且灵活的技术，它可以帮助开发人员更好地控制和操作网页的结构和内容，提供了丰富的功能和灵活性，有补充或指正的内容，欢迎在评论区中留言。
原文地址：https://blog.csdn.net/weixin_74141222/article/details/142313642
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！