JA document的练习 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id=""one"></div>
        <input type="text" name="two" id="two" value="123" />
        // name = value
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="four"></div>
        <div class="four"></div>
        <div class="four"></div>
        <div class="four"></div>
        <div class="four"></div>
        
        <div id="five">
            今天晴天
        </div>
        <table border="1" cellspacing="0" cellpadding="0">
            
        </table>
        
    </body>
</html>
<script type="text/javascript">
    

//           找到dom元素
//document   文档
//get 拿到 得到
//element  元素
// by 通过
//通过id名找到元素
var one = document.getElementById("one");
//通过name属性 找到元素
var two = document.getElementsByName("two");
//通过标签名找到元素 HTMLCollection  集合
 var three = document.getElementsByTagName("li");
 //console.log(three[0])
 // 0: <li>
  //  1: <li>
   // 2: <li>
    //3: <li>
 //   4: <li>
  //  length:5
   var four = document.getElementsByClassName("four");
   //              操作dom元素
   //一：操作内容
   var five = document.getElementById("five");
   //1、five.innerHTML = "今天<br/>阴天"
   //2、five.innerText = "今天<br/>阴天"
   //打印表格  练习
   var tab = document.getElementsByTagName("table");
   var str = ""
   for(var i = 0;i < 3;i++){
       str = str+"<tr>"
       for(var j = 0;j<3;++){
           str = str + "<td>周一</td>"
       }
       str = str + "</tr>"
   }
   tab[0].innerHTML = str;
   //3、操作表单的value
   var inpt = document.getElementById("two")
   alert(inpt.value);
</script>

 

posted @ 2018-04-15 11:49  韩凯  阅读(112)  评论(0)    收藏  举报