当前位置：首页 > article >正文

JavaScript 的 DOM 技术

article 2024/11/13 8:42:55

文章目录

前言
一、DOM 技术是什么？
二、DOM 技术的使用
- 1.DOM 的分层结构
- 2.遍历文档
- 3.获取文档中的指定元素
- 4.操作文档
总结

前言

通过 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。

1.1 Node 对象的属性
属性	功能描述	类型
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 对象的节点类型、节点名、节点值以及节点类型常量。

1.2 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 节点对象提供方法来实现的。

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>

运行结果：