<!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>