自学内容网 自学内容网

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。

1.1 Node 对象的属性
属性功能描述类型
parentNode节点的父节点,没有父节点时为 nullNode
childNode节点的所有子节点的 NodeListNodeList
firstChild节点的第一个子节点,没有则为 nullNode
lastChild节点的最后一个子节点,没有则为 nullNode
previousSibling节点的前一个兄弟节点,没有则为 nullNode
nextSibling节点的下一个兄弟节点,没有则为 nullNode
nextChild节点的下一个子节点,没有则为 nullNode
nodeName节点名String
nodeValue节点值String
nodeType表示节点类型的整型常量Short

        由于 HTML 文档开发复杂混乱,DOM 定义了 nodeType 来表示节点的类型。下面的展示 Node 对象的节点类型、节点名、节点值以及节点类型常量。

1.2 Node 对象的节点类型、节点名、节点值及节点类型常量
节点类型节点名节点值节点类型常量
Attr属性名属性值ATTRIBUTE_NODE(2)
CDATASection#cdata-sectionCDATA 段内容CDATA_SECTION_NODE(4)
Comment#comment注释的内容COMMENT_NODE(8)
Document#documentnullDOCUMENT_NODE(9)
DocumentFragment#document-fragmentnullDOCUMENT_FRAGMENT_NODE(11)
DocumentType文档类型名nullDOCUMENT_TYPE_NODE(10)
Element标记名nullELEMENT_NODE(1)
Entity实体名nullENTITY_NODE(6)
EntityReference引用实体名nullENTITY_REFERENCE_NODE(5)
Notation符号名nullNOTATION_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>

        运行结果:

        


总结

        以上就是 JavaScript 的 DOM技术,本文简单介绍了 DOM 技术对页面开发的动态交互,而DOM技术是一种强大且灵活的技术,它可以帮助开发人员更好地控制和操作网页的结构和内容,提供了丰富的功能和灵活性,有补充或指正的内容,欢迎在评论区中留言。


原文地址:https://blog.csdn.net/weixin_74141222/article/details/142313642

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!