get 获取方式练习题及dom基础

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

           <div id="div1"></div>

           <div class="div2"></div>

    </body>

dom基础

</html>

<script>

    //<!--文档对象模型

    //第一步：取对象            -->

    var div1 = document.getElementById('div1') //    id取对象

    var div2 = document.getElementsByClassName('div2')[] //    class名取对象

    //第二步操作对象

    //1 改内容

    div1.innerHTML = "<b>加粗</b>"

    div2.innerText = "<b>加粗</b>"

    //2 改样式

    div1.style.color = "blue";

    div1.style.fontFamily = "华文彩云";

    //3 加事件

    div1.onclick=(){

        alert("点击事件出发")

    }

    //造新元素

    var new_div=document.createElement("div")

    //改样式/改内容

    new_div.innerHTML="新元素"

    document.body.appendChild(new_div);//增加

    document.body.removeChild(new_div);//删除

</script>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            #s1{

                width: 100px;                //下拉按钮宽度100像素

            }

        </style>

    </head>

    <body>

        <form action="" method="get">       //表单，提交方式为get

            <input type="text" name="t1" id="t1" />    //文本框，名字为t1，地址为t1

            <input type="button" id="but1" value="添加"/>  //名称为添加，地址为but1的按钮

            <select size="" id="s1" >                  // 地址为s1，下拉项为7的下拉菜单

            <input type="button" id="but2" value="删除">      //名称为删除，地址为but2的按钮

            </select>

        </form>

    </body>

</html>

     <script>

         var s1=document.getElementById("s1")         //创造新元素s1为从地址s1取得数

         var t1=document.getElementById("t1")

         var but1=document.getElementById("but1")

         var but2=document.getElementById("but2")

         but1.onclick=function(){                    //当点击添加按钮时，

                                                     //     下拉菜单添加从文本框中提取的值

             s1.innerHTML+="<option>"+t1.value+"</option>"

             t1.value="";

         }

         but2.onclick=function(){

             s1.removeChild(s1.selectedOptions[]);   //当点击删除按钮时，选中的选项的元素被移除

         }

     </script>

巴特西

get 获取方式练习题及dom基础

最新文章

热门文章