DOM操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/scwMason/article/details/80732073

<style type="text/css">
        div.content{
            width:200px;
            height:100px;
            border:2px solid red;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            background-color: aqua;
            margin-left: 100px;
        }
        button{
            width: 100px;
            height: 100px;
            margin-left: 20px;
            background-color:red;
        }
        .active{
            display: inline-block;
            background-color: yellow;
        }
        </style>
    </head>
    <body>
        <button class="active">shen</button>
        <button>cheng</button>
        <button>wei</button>
        <div class="content">沈</div>
        <div class="content">程</div>
        <div class="content">炜</div>
        <script>
            var btn=document.getElementsByTagName("button");//获取所有的button标签
            var div=document.getElementsByClassName("content");//获取所有类名是content的标签
            for(var i=0;i<btn.length;i++)
            {
                (function(i){
                    btn[i].onclick=function(){
                        for(var j=0;j<btn.length;j++){
                            btn[j].className="";
                            div[j].style.display="none";
                        }
                        this.className="active";
                        div[i].style.display="block";
                    }
                    
                }(i))

            }

dom基本框架：

这个方法表示选中结点是否有子结点，返回布尔值

下面是nodeType( )后分别返回的结果

下面是一种不利用children访问元素节点的方法：

var div=document.getElementsByTagName("div")[0];
            function returnElementChild(node){、
                //类数组
                var temp={
                    length:0,
                    push:Array.prototype.push,
                    splice:Array.prototype.splice
                },
                child=div.childNodes,
                length=child.length;
                for(var i=0;i<length;i++){
                    if(child[i].nodeType==1){
                        temp.push(child[i]);
                    }
                }
                return temp;
            }
           console.log(returnElementChild(div));

他们通过原型链的方式进行链接和继承

第一种：

第二种：

都是选中了第一个div标签下的span

一般在开发中我们会经常使用第二种

另外我们可以直接选中下面的三个标签：

这个是选中html标签

创建元素节点：

var div=document.createElement("div")

创建文本结点

var text=document.createTextNode("你好");

插入：

<body>
        <div></div>
        <span></span>
        <script type="text/javascript">
        var div=document.getElementsByTagName("div")[0];//取出第一个div标签
        var text=document.createTextNode("宝宝");//创建文本结点
        div.appendChild(text);//插入
        </script>

    </body>

div.insertBefor(a,b)

理解为把a插入到b的前面

删除：

<body>
        <div>
            <span></span>
            <strong></strong>
        </div>
        <span></span>
        <script type="text/javascript">
        var div1=document.getElementsByTagName("div")[0];
        var span=document.getElementsByTagName("span")[0];
        div1.removeChild(span);
        </script>
    </body>

删除子节点

div里面的span标签就没了，而且可以用参数接收这个函数的返回值，相当于剪切

<body>
        <div>
            <span></span>
            <strong></strong>
        </div>
        <span></span>
        <script type="text/javascript">
        var div1=document.getElementsByTagName("div")[0];
        var span=document.getElementsByTagName("span")[0];
        span.remove();
        div1.remove();
        </script>
    </body>

直接去掉，但是只能是先把标签取出来然后才能进行操作

而且没有返回值，直接销毁

<body>
        <div>
            <span></span>
            <strong></strong>
        </div>
        <span></span>
        <script type="text/javascript">
        var div1=document.getElementsByTagName("div")[0];
        var span=document.getElementsByTagName("span")[0];
        span.innerHTML=132;
        // var span=document.getElementsByTagName("span")[0];
        // span.remove();
        // div1.remove();
        </script>
    </body>

span.innerHTML是取到标签里面的内容

设置行间属性，steAttribute("属性名"，“属性值”)

获取属性值

另外修改id和class可以直接：

div.class=...

div.id=....

例题：实现类似insertBefor( )方法的insert After（）方法

<div>
            <i></i>
            <b></b>
            <span></span>
        </div>

Element.prototype.insertAfter=function(targetnode,afternode){
            var befor=afternode.nextElementSibling;
            if(befor==null){//如果它的下一个元素节点没有的话，就说明到底
                this.appendChild(targetnode);
            }
            else{//如果有下一个结点，那么就放在下一个结点的前面
                this.insertBefor(targetnode,befor);
            }
        }
        var div=document.getElementsByTagName("div")[0];
        var b=document.getElementsByTagName("b")[0];
        var span=document.getElementsByTagName("span")[0];
        div.insertAfter(b,span);

实现一个功能：两个input，里面的秒和分不断变化，直到30分0秒停止：

minutes:<input type="text" value="0">
       seconds:<input type="text" value="0">
        <script>
        var num=0;
        var num2=0;
        var value1=document.getElementsByTagName("input")[0];
        var value2=document.getElementsByTagName("input")[1];
        setInterval(function(){
             num++;
             if(num==60){
                 num=0;
                 num2++;
             }
             if(num2==30){
                 clearInterval(1);
             }
             value1.value=num2;
             value2.value=num;
        },10)