DOM操作1

1、DOM文档对象模型:操作页面元素(标签)

• html文件看成一个文档，把文档看成一个对象
• xml也是一种文档，标签自定义，系统不自带标签，偏向于存储数据

2、DOM树：由文档及文档中的所以元素（标签）组成的一个树形结构图，叫树状图，也叫DOM树

• 元素（element）：页面中的每个标签都是一个元素，每个元素都是一个对象
• 文档（document）：一个页面就是一个文档
• 节点（node）：页面中所有内容都是节点，包括标签，属性，文本

3.DOM操作案例：

<!-- 例1:点击弹窗(演示逐渐html,js分离的过程) -->
        <!-- 最开始:在HTML里写入js -->
        <input type="button" value="最开始" onclick="alert('我被点了')">
        <!-- 改进:利用函数 -->
        <input type="button" value="改进" onclick="f1()">
        <script>
            var f1=function(){
                alert("我被点了");
            };
        </script>
        <!-- 最终版本: -->
        <input type="button" value="最终版本" id="btn">
        <script>
            //必须先有按钮,然后才能获取,获取之后才能注册事件
            var btnobj=document.getElementById("btn");
            btnobj.onclick=function(){
                alert("我被点了");
            }
        </script>

 <!-- 例2:点击按钮显示图片:点击按钮设置img标签的src属性有个图片的路径 -->
    <input type="button" value="点击" id="btn">
    <img src="" alt="" id="im">
    <script>
        var btnobj=document.getElementById("btn")
        btnobj.onclick=function(){
            var imobj=document.getElementById("im");
            imobj.src="1.png";
            imobj.alt="未找到图片";
        }
    </script>

<!-- 例3:点击按钮修改p标签内容 -->
        <input type="button" value="点击" id="btn">
        <p id="p1"></p>
        <script>
            //一般成对的标签,中间的文本内容设置用innerText这个属性的方式
            document.getElementById("btn").onclick=function(){
                document.getElementById("p1").innerText="我是新写进的内容";
            };
        </script>

<!-- 例4:点击按钮设置多个p标签的内容 -->
    <input type="button" value="点击" id="btn">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <script>
     //一个或者多个标签,都是在数组中存储的,getElementsByTagName这行代码返回值就是一个数组
     document.getElementById("btn").onclick=function( ){
        var pobjs=document.getElementsByTagName("p");
        for(var i=0;i<pobjs.length;i++){
            pobjs[i].innerText="我们都是新内容";
        }
     };
    </script>

<!-- 例5:点击每个图片弹出对话框 -->
    <img src="pic.png" alt="" />
    <img src="pic.png" alt="" />
    <img src="pic.png" alt="" />
    <script>
        var imobj=document.getElementsByTagName("img");
        for(var i=0;i<imobj.length;i++){
            imobj[i].onclick=function(){
                alert("我被点了");
            }
        }
    </script>

 <!-- 例6:点击按钮修改value属性 -->
    <input type="button" value="按钮" id="btn">
    <script>
        //在某个元素的事件上中,自己的事件中的this就是当前的这个元素对象
        var btnobj=document.getElementById("btn");
        btnobj.onclick=function(){
            this.value="我换了";
            this.type="text";
        }
    </script>

<!-- 例7:点击图片修改自身的宽和高 -->
    <img src="pic.png" alt="">
    <script>
        var imgobj=document.getElementsByTagName("img");
        imgobj[0].onclick=function(){
            this.width="200";
            this.height="300";
        }
    </script>

<!--例8: 点击每个按钮修改内容 "被点了" -->
    <input type="button" value="">
    <input type="button" value="">
    <input type="button" value="">
    <input type="button" value="">
    <input type="button" value="">
    <input type="button" value="">
    <script>
        var btnobjs=document.getElementsByTagName("input");
        //每个按钮注册事件
        for(var i=0;i<btnobjs.length;i++){
            btnobjs[i].onclick=function(){
            //把所有的按钮的value值设置为"我没被动"
                for(var j=0;j<btnobjs.length;j++){
                    btnobjs[j].value="我没被动";
                }
                this.value="被点了";
            }
        }
    </script>

 <!-- 例9:点击图片修改路径:a链接的路径是大图,嵌套小图片 -->
    <a href="big.png" id="ak"><img src="small.png" alt="" id="im"></a>
    <script>
        document.getElementById("im").onclick=function(){
            this.src=document.getElementById("ak").href
            // return false;//-----阻止页面跳转
        }
    </script>

 <!-- 10:点击按钮切换图片 -->
    <input type="button" value="切换大图" id="btn"><br>
    <img src="small.png" alt="" id="im">
    <script>
        document.getElementById("btn").onclick=function(){
            document.getElementById("im").src="big.png";
        };
    </script>

<!-- 例11:点击按钮修改兴趣(表单) -->
    <input type="button" value="选择兴趣" id="btn">
    <input type="checkbox" name="fav" value="1">王者荣耀
    <input type="checkbox" name="fav" value="2" id="ck1">绝地求生
    <input type="checkbox" name="fav" value="3">QQ飞车
    <input type="checkbox" name="fav" value="4">魔兽
    <input type="checkbox" name="fav" value="5" id="ck2">LOL
    <input type="checkbox" name="fav" value="6">DNF
    <script>
    //结论:在表单标签中,如果属性和值只有一个,并且是这个属性本身,那么在写DOM操作时,这个属性值是布尔类型就可以了
    document.getElementById("btn").onclick=function(){
        document.getElementById("ck1").checked=true;
        document.getElementById("ck2").checked=true;
    };
    </script>

<!-- 例12:点击按钮文本域的相关属性设置 -->
    <textarea name="" id="tt" cols="30" rows="10" rea>红红火火恍恍惚惚红红火火恍恍惚惚红红火火恍恍惚惚红红火火
    恍恍惚惚红红火火恍恍惚惚红红火火恍恍惚惚红红火火恍恍惚惚红红火火恍恍惚惚红红火火恍恍惚惚红红火</textarea><br>
    <input type="button" value="设置禁用" id="btn1">
    <input type="button" value="设置只读" id="btn2">
    <script>
    //disable-----这个属性是禁用的
    //readonly-----这个属性是只读(坑:js设置o要大写)
    //html表单中属性和值是自己的,并且只有一个,只写这个属性即可,不用赋值
       document.getElementById("btn1").onclick=function(){
           document.getElementById("tt").disabled=true;
       };
       document.getElementById("btn2").onclick=function(){
           document.getElementById("tt").readOnly=true;
       };
    </script>

 <!-- 例13:点击按钮修改div的宽高和背景 -->
    <input type="button" value="设置背景" id="btn">
    <div id="dv"></div>
    <script>
    //1.设置样式通过style属性
    //2.设置宽高后面必须加单位px
    //3.凡是css属性有连接符的,去掉,然后后面的首字母大写即可
        document.getElementById("btn").onclick=function(){
            document.getElementById("dv").style.width="200px";
            document.getElementById("dv").style.height="300px";
            document.getElementById("dv").style.backgroundColor="yellow";
        };
    </script>

<!-- 例14:点击按钮设置div隐藏/显示 -->
    <input type="button" value="设置隐藏" id="btn">
    <div id="dv" style="width: 200px;height: 200px;background: rgb(25, 211, 25);"></div>
    <script>
    //显示隐藏用display:none和display:block
        document.getElementById("btn").onclick=function(){
            if(this.value=="隐藏"){
                document.getElementById("dv").style.display="none";
                this.value="显示";
            }else{
                document.getElementById("dv").style.display="block";
                this.value="隐藏";
            }
        };
    </script>

<style>
        .cls{
            width: 300px;
            height: 300px;
            background: red;
            border: 10px solid rgb(8, 231, 45);;
        }
    </style>
</head>
<body>
    <!-- 例15:点击按钮设置div样式,用类样式的方法 -->
    <input type="button" value="设置样式" id="btn">
    <div id="dv"></div>
    <script>
    //js代码在操作DOM时,设置元素的类样式,不能使用class关键字,使用className代替
    //如果判断div是否使用了类样式的时候,没有class属性就是className==""
        document.getElementById("btn").onclick=function(){
            document.getElementById("dv").className="cls";
        };
    </script>
</body>