DOM的查找与操作
<!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>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class="four">9</div> <div class="four">8</div> <div class="four">7</div> <div class="four">6</div> <div class="four">5</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 : id名字 //通过id名找到元素 var one = document.getElementById("one"); //通过name属性,找到元素 var two = document.getElementsByName("two"); //通过标签名找到元素 HTMLCollection 集合 var three = document.getElementsByTagName("li"); //console.log(three[]); 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;j++) { str = str +"<td>周一</td>"; } str = str +"</tr>"; } tab[0].innerHTML = str; //3.操作表单的value var inpt = document.getElementById("two"); alert(inpt.value); </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步