1、dom.html
nl<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <script> console.log(document); //整个页面 console.log(document.documentElement); //html标签 console.log(document.body); //body标签 </script> </html>2.获取页面元素.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div id="four">4</div> <div id="box"> <div>哈哈</div> <div>呵呵</div> </div> <script> // 批量获取页面上指定的标签 // getElementsByTagName('标签名') //通过标签名获取多个元素 返回一个伪数组 包含了符合条件的所有元素 // var result = document.getElementsByTagName('div'); // console.log(result); // console.log(result[3]); // var result = document.getElementsByTagName('span'); //如果找不到就返回一个空的伪数组 // console.log(result); // 获取指定的元素 // getElementById('id名') //通过id获取元素 返回的就是那个对应的元素 // var result = document.getElementById('four'); // console.log(result); // var result1 = document.getElementById('one'); //如果找不到返回的是null // console.log(result1); // console.log(document.getElementsByTagName('div')); //在整个页面的范围内找 // var box = document.getElementById('box'); // console.log(box.getElementsByTagName('div')); //在元素的范围中去找 // 总结: // 批量获取 : document/element.getElementsByTagName('标签名') 返回一个伪数组,如果找不到返回空的伪数组 // 通过id获取: document.getElementById('id名') 返回具体的元素, 找不到返回null </script> </body> </html>3、事件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="box"></div> <script> //需求: 点击div,alert一句话 //1. 获取div var box = document.getElementById('box'); //2. 注册事件 // box.onclick = function(){ // alert('box被点击了'); // } // 注册事件的语法: 元素.on + 事件名 = 函数; // 事件的三要素: // 事件源 : 给谁注册事件,谁就是事件源 // 事件名 : 要注册什么事件,那个事件名就是什么 点击事件的事件名是: click // 事件处理函数 : 事件触发的时候会被调用的函数 </script> </body> </html>4、点击切换图片
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn">点击切换图片</button> <br> <img id="img" src="images/a.jpg" alt="图片" width="500" height="350"> </body> </html> <script> //需求: 点击btn按钮,点击的时候切换图片 //1. 获取元素btn,img var btn = document.getElementById('btn'); var img = document.getElementById('img'); // 2. 给btn注册点击事件 btn.onclick = function(){ // 3. 在事件处理函数中,修改img图片(修改img的src属性的值) // console.log(img.src); //注意返回的是绝对路径 img.src = 'images/b.jpg'; } </script>5、点击回来切换图片
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<button id="btn">点击切换图片</button>--> <a href="" id="btn"> 点击来回切换图片</a> <br> <img id="img" src="images/a.jpg" alt="图片" width="500" height="350"> </body> </html> <script> //需求: 点击btn按钮,点击的时候来回切换图片 //1. 获取元素btn,img var btn = document.getElementById('btn'); var img = document.getElementById('img'); var flag = true;// 默认展示的是a.jpg, flag为true的时候,表示当前展示的是a.jpg //如果flag是false,就代表当前展示的是b.jpg // 2. 给btn注册点击事件 btn.onclick = function(){ // 3. 在事件处理函数中,修改img图片(修改img的src属性的值) console.log(img.src); //注意返回的是绝对路径 // 判断如果是a.jpg就切换到b.jpg,否则就换回a.jpg if(flag){ //证明当前展示的a.jpg img.src = 'images/b.jpg'; flag = false; //图片发生变化,flag也要跟着改变状态 }else{ //证明当前展示的是b.jpg img.src = 'images/a.jpg'; flag = true; } return false; } </script>6、给a标签注册点击事件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--a标签默认行为 : 页面跳转--> <a href="" id="link">点击在控制台打印一句话</a> <script> var link = document.getElementById('link'); //由于a标签的超链接功能,导致事件触发之后,还会默认刷新页面/跳转页面,我们不能到达我们最终的目的 link.onclick = function(){ console.log('a被点击了'); return false; //在事件处理函数的最后一行,写一个return false,就可以组织a的默认行为 } </script> </body> </html>7、操作元素的属性
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id='box'> 哈哈哈哈哈 <span>span的文本</span> </div> <!--<img src="images/1.jpg" alt="" title="哈哈" id="img">--> <input type="text" value='哈哈哈'> <script> var img = document.getElementById('img'); // console.log(img.src); // console.log(img.title); // console.log(img.id); // // img.src = 'images/2.jpg'; // img.title = '呵呵'; // img.id = 'img1111' // innerText 获取/操作元素里面的文本 // innerHTML 获取/操作元素里面的内容 (会识别html标签) // 共同点: 都会覆盖原来的内容 // 注意: innerText , innerHTML 一般用来操作双标签 // var box = document.getElementById('box'); // console.log(box.innerText); //返回元素里面所有的文本 // console.log(box.innerHTML); //返回元素里面所有的内容 // box.innerText = '我是动态加的内容<p>p的内容</p>'; //不会识别标签 // box.innerHTML = '我是动态加的内容<p>p的内容</p>'; //会识别标签,把标签直接渲染出来 // var input = document.getElementsByTagName('input'); // console.log(input[0].innerText); // console.log(input[0].innerHTML); // console.log(input[0].value); </script> </body> </html>8、美女相册
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helvetica","Arial",serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1 { color: #333; background-color: transparent; } a { color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul { padding: 0; } li { float: left; padding: 1em; list-style: none; } #imagegallery { } #imagegallery a { margin: 0px 20px 20px 0px; padding: 0px; display: inline; } #imagegallery a img { border: 0; } </style> </head> <body> <h2> 美女画廊 </h2> <div id="imagegallery"> <a href="images/1.jpg" title="美女A"> <img src="images/1-small.jpg" width="100px" alt="美女1" /> </a> <a href="images/2.jpg" title="美女B"> <img src="images/2-small.jpg" width="100px" alt="美女2" /> </a> <a href="images/3.jpg" title="美女C"> <img src="images/3-small.jpg" width="100px" alt="美女3" /> </a> <a href="images/4.jpg" title="美女D"> <img src="images/4-small.jpg" width="100px" alt="美女4" /> </a> </div> <div style="clear:both"></div> <img id="image" src="images/placeholder.png" alt="" width="450px" /> <p id="des">选择一个图片</p> </body> </html> <script> //需求: 点击小图,修改大图和对应的文本 // 给每一个a注册点击事件,在事件处理函数中,获取到当前a的href的值和title的值.分别赋值给img的src 和 p的innerText // 1. 获取元素 var imagegallery = document.getElementById('imagegallery'); var links = imagegallery.getElementsByTagName('a'); var image = document.getElementById('image'); var des = document.getElementById('des'); // 2. 给每一个a注册点击事件 // links[0].onclick = function(){} // links[1].onclick = function(){} // links[2].onclick = function(){} // links[3].onclick = function(){} for(var i = 0; i < links.length; i++) { links[i].onclick = function(){ // 3. 在事件处理函数中,获取到当前点击的a,然后拿到href 和title,再去赋值 // console.log(links[i]); // console.log(this); //指向我们点击的事件源 // console.log(this.href); // // console.log(this.title); // image.src = this.href; des.innerText = this.title; return false;//阻止a的默认行为 } } </script>9、总结
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // DOM: 把页面上的标签抽象成对象,在js中通过操作对象,实现操作页面上标签的目的 // 元素: 在html中<div>叫标签, 在DOM中,称之为元素 // 获取元素: // document/element.getElementsByTagName('标签名') 返回一个伪数组 ,如果找不到返回空的 // 伪数组 // document.getElementById('id名') 返回符合条件的那个元素 ,如果找不到就是null // 获取body : document.body // 获取html: document.documentElement // // 事件: 点击事件 click // 事件源 : 给谁注册事件,谁就是事件源 // 事件名 : 注册的是什么事件 // 事件处理函数 : 触发事件时,调用的函数 // 事件源.on + 事件名 = 事件处理函数 // // 操作元素的属性: // innerText // innerHTML // 相同点: 都会覆盖原来的内容 // 不同点: innerText 只识别文本 // innerHTML 可以识别标签 // 注意: 一般用于双标签 </script> </body> </html>10、课堂测试题目
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--如果a的href属性里面写了javascript: .这个javascript代表协议. 作用: 改变了a的默认行为, 会执行javascript后面的代码--> <!--void是js中的一个关键字 作用: 什么都不做--> <!--<a href="javascript:void(0) ;">点击</a>--> <!--<a href="javascript:void 0;">点击</a>--> <!--<a href="javascript:;">点击</a>--> </body> </html>11、扩展内容
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #wrap div{ } </style> </head> <body> <div id="wrap"> <div class="one">1</div> <div class="one">2</div> <div class="one">3</div> </div> <div class="one">4</div> <div class="one">5</div> <input type="text" name="one"> <script> // var box = document.getElementById('box'); // console.log(box); //不是标准的方式 不建议使用 // 获取元素的其他方式: //console.log(document.getElementsByName('one')); //通过name属性找元素, 返回的是伪数组,找不到是空的伪数组 console.log(document.getElementsByClassName('one')); //通过类型获取元素.返回伪数组,找不到返回空的伪数组 // var wrap = document.getElementById('wrap'); //console.log(wrap.getElementsByClassName('one')); //也可以使用element调用 //console.log(document.querySelector('.one')); //通过选择器查找元素 ,返回所有符合条件里面的第一个 //console.log(document.querySelectorAll('#wrap div')); //通过选择器查找元素 ,返回一个伪数组 </script> </body> </html>12、切换多张图片
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn">点击切换</button> <br> <img src="images/0.jpg" alt="" id="img"> <script> //需求: 点击按钮,修改img的src路径 //1. 获取元素 var btn = document.getElementById('btn'); var img = document.getElementById('img'); var index = 0; //标记当前展示的是第几张 // 2. 给按钮注册点击事件 btn.onclick = function(){ // 3. 在事件处理函数中,判断当前是哪一张,修改展示下一张 index++; img.src = 'images/'+index+'.jpg'; //判断是否是第9张,如果是第几张,就把index变成-1. // 因为下一次在点击进来的时候,会先index++, -1就变成了0 if(index==9){ index = -1; } } </script> </body> </html>
