<!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')[0] //    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="1" method="get">       //表单，提交方式为get
            
            <input type="text" name="t1" id="t1" />    //文本框，名字为t1，地址为t1
            <input type="button" id="but1" value="添加"/>  //名称为添加，地址为but1的按钮
            <select size="7" 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[0]);   //当点击删除按钮时，选中的选项的元素被移除
         }
         
     </script>