【javascript应用篇】——一个例子中学会javascript的DOM

最新推荐文章于 2022-07-06 23:52:07 发布

菜腿1994

最新推荐文章于 2022-07-06 23:52:07 发布

阅读量488

点赞数

分类专栏： # JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/changyinling520/article/details/53207635

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

【前言】
在学习AJAX部分的时候又提及了javascript的DOM知识，小编在视频的学习当中对于DOM的理解加深，而且对于DOM的节点的运用也逐步的熟练，而且从视频当中的小例子基本全包括javascript的DOM的相关知识，希望可以给你们帮助！
【内容】
1.DOM是什么？
DOM（文档对象模型）可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。这是表示和处理一个HTML或XML文档的常用方法，Dom技术使得页面的交互性大大地增强
2.DOM的结构
这里写图片描述
2.DOM例子

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript">
            //替换节点
            function replaceDom() {
                //1.获取根节点body标签
                var bodyNode = document.getElementsByTagName("body")[0];
                //获取页面的所有的div节点
                var divNodes = document.getElementsByTagName("div");
                var divLength = divNodes.length;
                if (divLength >= 2) {
                    var firstDiv = divNodes[0];
                    var lastDiv = divNodes[divLength - 1];
                    //两者相互替换位置，两句缺一不可
                    var replaceNode = bodyNode.replaceChild(firstDiv, lastDiv);
                    bodyNode.insertBefore(replaceNode, divNodes[0]);
                }
            }

            //插入节点
            function appendDom() {
                //1.获取body节点
                var bodyNode = document.getElementsByTagName("body")[0];
                //2.首先创建一个节点
                var divElement = document.createElement("div");
                //3.创建节点中的内容
                var divText = document.createTextNode("aaaa");
                //4.向节点中添加内容
                divElement.appendChild(divText);
                //5.向body节点添加创建的新节点，显示在页面上
                bodyNode.insertBefore(divElement, null);
            }

            //追加节点
            function insertDom() {
                //1.获取body节点
                var bodyNode = document.getElementsByTagName("body")[0];
                //2.首先创建一个节点
                var divElement = document.createElement("div");
                //3.创建节点中的内容
                var divText = document.createTextNode("aaaa");
                //4.向节点中添加内容
                divElement.appendChild(divText);
                bodyNode.appendChild(divElement);
            }

            //删除节点div[0]
            function removeDom() {
                //1.获取body节点
                var bodyNode = document.getElementsByTagName("body")[0];
                //2.获取要删除的节点
                var divNode = document.getElementsByTagName("div");
                var firstDiv = divNode[0]; //第一个节点内容
                //3.运用removechild删除节点
                bodyNode.removeChild(firstDiv);
            }
            //克隆节点
            function cloneDom(){
                //1.确定克隆的节点
                var divnode=document.getElementsByTagName("div");
                 //2.确定克隆的方式true或者是false
                var cloneTrue=divnode.cloneNode(ture);
                var cloneFalse=divnode.cloneNode(false);


            }
        </script>
    </head>

---------------------------------------------------------------------

<body>
        <div>你很幸福</div>
        <div>你非常幸福</div>
        <div>你真的太幸福</div>
        <input type="button" value="替换div标签" onclick="replaceDom()"/>
        <input type="button" value="追加div标签" onclick="appendDom()"/>
        <input type="button" value="移除div标签" onclick="removeDom()"/>
        <input type="button" value="插入div标签" onclick="insertDom()"/>
        <input type="button" value="克隆div标签" onclick="cloneDom()"/>
    </body>
</html>

【总结】
DOM是文档对象模型，它分为了元素节点，根节点和所有节点，其实对于节点元素来说我认为所有节点中的属性和方法对于节点来说都是适用的。其中元素节点有一些特殊，它的方法中有Attribute关键字；熟练和掌握上面例子中的方法，可以帮助我们处理一些基本简单的DOM问题！

菜腿1994

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
22
评论
【javascript应用篇】——一个例子中学会javascript的DOM

【前言】在学习AJAX部分的时候又提及了javascript的DOM知识，小编在视频的学习当中对于DOM的理解加深，而且对于DOM的节点的运用也逐步的熟练，而且从视频当中的小例子基本全包括javascript的DOM的相关知识，希望可以给你们帮助！【内容】 1.DOM是什么？ DOM（文档对象模型）可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。这是
复制链接

扫一扫