DOM(一)
dom
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button id="btn">我是一个按钮</button> 9 <script type="text/javascript"> 10 11 /* 12 * 浏览器已经为我们提供 文档节点 对象这个对象是window属性 13 * 可以在页面中直接使用，文档节点代表的是整个网页 14 */ 15 //console.log(document); 16 17 //获取到button对象 18 var btn = document.getElementById("btn"); 19 20 //修改按钮的文字 21 btn.innerHTML = "I'm Button"; 22 23 24 </script> 25 </body> 26 </html>
事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <!-- 9 我们可以在事件对应的属性中设置一些js代码， 10 这样当事件被触发时，这些代码将会执行 11 12 这种写法我们称为结构和行为耦合，不方便维护，不推荐使用 13 --> 14 <!--<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>--> 15 <button id="btn">我是一个按钮</button> 16 <script type="text/javascript"> 17 18 /* 19 * 事件，就是用户和浏览器之间的交互行为， 20 * 比如：点击按钮，鼠标移动、关闭窗口。。。 21 */ 22 23 24 25 //获取按钮对象 26 var btn = document.getElementById("btn"); 27 28 /* 29 * 可以为按钮的对应事件绑定处理函数的形式来响应事件 30 * 这样当事件被触发时，其对应的函数将会被调用 31 */ 32 33 //绑定一个单击事件 34 //像这种为单击事件绑定的函数，我们称为单击响应函数 35 btn.onclick = function(){ 36 alert("你还点~~~"); 37 }; 38 39 40 </script> 41 </body> 42 </html>
文档加载
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 * 浏览器在加载一个页面时，是按照自上向下的顺序加载的， 10 * 读取到一行就运行一行,如果将script标签写到页面的上边， 11 * 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载 12 * 会导致无法获取到DOM对象 13 */ 14 15 16 17 /* 18 * onload事件会在整个页面加载完成之后才触发 19 * 为window绑定一个onload事件 20 * 该事件对应的响应函数将会在页面加载完成之后执行， 21 * 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了 22 * 23 */ 24 window.onload = function(){ 25 //获取id为btn的按钮 26 var btn = document.getElementById("btn"); 27 //为按钮绑定一个单击响应函数 28 btn.onclick = function(){ 29 alert("hello"); 30 }; 31 }; 32 33 34 </script> 35 </head> 36 <body> 37 38 <button id="btn">点我一下</button> 39 40 <!--<script type="text/javascript"> 41 42 /* 43 * 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码 44 */ 45 //获取id为btn的按钮 46 var btn = document.getElementById("btn"); 47 //为按钮绑定一个单击响应函数 48 btn.onclick = function(){ 49 alert("hello"); 50 }; 51 52 </script>--> 53 54 </body> 55 </html>
dom查询
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Untitled Document</title> 6 <link rel="stylesheet" type="text/css" href="style/css.css" /> 7 <script type="text/javascript"> 8 9 window.onload = function(){ 10 11 //为id为btn01的按钮绑定一个单击响应函数 12 var btn01 = document.getElementById("btn01"); 13 btn01.onclick = function(){ 14 //查找#bj节点 15 var bj = document.getElementById("bj"); 16 //打印bj 17 //innerHTML 通过这个属性可以获取到元素内部的html代码 18 alert(bj.innerHTML); 19 }; 20 21 22 //为id为btn02的按钮绑定一个单击响应函数 23 var btn02 = document.getElementById("btn02"); 24 btn02.onclick = function(){ 25 //查找所有li节点 26 //getElementsByTagName()可以根据标签名来获取一组元素节点对象 27 //这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中 28 //即使查询到的元素只有一个，也会封装到数组中返回 29 var lis = document.getElementsByTagName("li"); 30 31 //打印lis 32 //alert(lis.length); 33 34 //变量lis 35 for(var i=0 ; i<lis.length ; i++){ 36 alert(lis[i].innerHTML); 37 } 38 }; 39 40 41 //为id为btn03的按钮绑定一个单击响应函数 42 var btn03 = document.getElementById("btn03"); 43 btn03.onclick = function(){ 44 //查找name=gender的所有节点 45 var inputs = document.getElementsByName("gender"); 46 47 //alert(inputs.length); 48 49 for(var i=0 ; i<inputs.length ; i++){ 50 /* 51 * innerHTML用于获取元素内部的HTML代码的 52 * 对于自结束标签，这个属性没有意义 53 */ 54 //alert(inputs[i].innerHTML); 55 /* 56 * 如果需要读取元素节点属性， 57 * 直接使用 元素.属性名 58 * 例子：元素.id 元素.name 元素.value 59 * 注意：class属性不能采用这种方式， 60 * 读取class属性时需要使用 元素.className 61 */ 62 alert(inputs[i].className); 63 } 64 }; 65 66 67 68 //查找#city下所有li节点 69 //返回#city的所有子节点 70 //返回#phone的第一个子节点 71 //返回#bj的父节点 72 //返回#android的前一个兄弟节点 73 //读取#username的value属性值 74 //设置#username的value属性值 75 //返回#bj的文本值 76 77 }; 78 79 80 </script> 81 </head> 82 <body> 83 <div id="total"> 84 <div class="inner"> 85 <p> 86 你喜欢哪个城市? 87 </p> 88 89 <ul id="city"> 90 <li id="bj">北京</li> 91 <li>上海</li> 92 <li>东京</li> 93 <li>首尔</li> 94 </ul> 95 96 <br> 97 <br> 98 99 <p> 100 你喜欢哪款单机游戏? 101 </p> 102 103 <ul id="game"> 104 <li id="rl">红警</li> 105 <li>实况</li> 106 <li>极品飞车</li> 107 <li>魔兽</li> 108 </ul> 109 110 <br /> 111 <br /> 112 113 <p> 114 你手机的操作系统是? 115 </p> 116 117 <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul> 118 </div> 119 120 <div class="inner"> 121 gender: 122 <input class="hello" type="radio" name="gender" value="male"/> 123 Male 124 <input class="hello" type="radio" name="gender" value="female"/> 125 Female 126 <br> 127 <br> 128 name: 129 <input type="text" name="name" id="username" value="abcde"/> 130 </div> 131 </div> 132 <div id="btnList"> 133 <div><button id="btn01">查找#bj节点</button></div> 134 <div><button id="btn02">查找所有li节点</button></div> 135 <div><button id="btn03">查找name=gender的所有节点</button></div> 136 <div><button id="btn04">查找#city下所有li节点</button></div> 137 <div><button id="btn05">返回#city的所有子节点</button></div> 138 <div><button id="btn06">返回#phone的第一个子节点</button></div> 139 <div><button id="btn07">返回#bj的父节点</button></div> 140 <div><button id="btn08">返回#android的前一个兄弟节点</button></div> 141 <div><button id="btn09">返回#username的value属性值</button></div> 142 <div><button id="btn10">设置#username的value属性值</button></div> 143 <div><button id="btn11">返回#bj的文本值</button></div> 144 </div> 145 </body> 146 </html>
图片切换练习
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 13 #outer{ 14 width: 500px; 15 margin: 50px auto; 16 padding: 10px; 17 background-color: greenyellow; 18 /*设置文本居中*/ 19 text-align: center; 20 } 21 </style> 22 23 <script type="text/javascript"> 24 25 window.onload = function(){ 26 27 /* 28 * 点击按钮切换图片 29 */ 30 31 //获取两个按钮 32 var prev = document.getElementById("prev"); 33 var next = document.getElementById("next"); 34 35 /* 36 * 要切换图片就是要修改img标签的src属性 37 */ 38 39 //获取img标签 40 var img = document.getElementsByTagName("img")[0]; 41 42 //创建一个数组，用来保存图片的路径 43 var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"]; 44 45 //创建一个变量，来保存当前正在显示的图片的索引 46 var index = 0; 47 48 //获取id为info的p元素 49 var info = document.getElementById("info"); 50 //设置提示文字 51 info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张"; 52 53 54 //分别为两个按钮绑定单击响应函数 55 prev.onclick = function(){ 56 57 /* 58 * 切换到上一张，索引自减 59 */ 60 index--; 61 62 //判断index是否小于0 63 if(index < 0){ 64 index = imgArr.length - 1; 65 } 66 67 img.src = imgArr[index]; 68 69 //当点击按钮以后，重新设置信息 70 info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张"; 71 }; 72 73 next.onclick = function(){ 74 75 /* 76 * 切换到下一张是index自增 77 */ 78 index++; 79 80 if(index > imgArr.length - 1){ 81 index = 0; 82 } 83 84 //切换图片就是修改img的src属性 85 //要修改一个元素的属性 元素.属性 = 属性值 86 img.src = imgArr[index]; 87 88 //当点击按钮以后，重新设置信息 89 info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张"; 90 91 }; 92 93 94 }; 95 96 97 </script> 98 </head> 99 <body> 100 <div id="outer"> 101 102 <p id="info"></p> 103 104 <img src="img/1.jpg" alt="冰棍" /> 105 106 <button id="prev">上一张</button> 107 <button id="next">下一张</button> 108 109 </div> 110 </body> 111 </html>
