dom文档树
dom操作
1.打印console.dir，展示属性和方法
2.缺点：有覆盖现象；都加载完成，入口函数才调用
dom对象.style.width 对象调的属性
通过添加类，注意加空格
1.获取dom的三种方式：
var oDiv = document.getElementById('box');
//获取的是集合，跟数组不同，它没有数组的方法
var oDiv = document.getElementsByTagName('div')[0];
var oDiv = document.getElementsByClassName('box')[0];
2.设置style样式
oDiv.style.width
oDiv.style.height
oDiv.style.marginLeft
.......只要是css中的属性都能通过style对象点出来，所有的css中类似margin-left，都要写成驼峰，marginLeft
3.设置标签中的属性：
console.log(oDiv.id);getter方法 获取id的属性值
oDiv.id= '123';setter方法 设置id的属性值
除了id，还有class，使用className,title
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style> 6 .box1 { 7 width: 200px; 8 height: 200px; 9 background-color: red; 10 /**/ 11 } 12 13 .active { 14 background-color: yellow; 15 } 16 17 </style> 18 19 </head> 20 <body> 21 22 <div id="box" class="box1"> 23 24 </div> 25 26 <img src="./xinyuan.jpg" alt="女优" title='黑' id="nv"> 27 <!-- <img src="./xinyuan.jpg" alt="女优" title='黑'> --> 28 29 <button class="btn">切换</button> 30 <script> 31 //js中入口函数 32 //当文档和图片都加载完成之后 入口函数才调用 33 window.onload = function () { 34 console.log(111); 35 var oDiv = document.getElementById('box'); 36 console.dir(oDiv); 37 console.log(oDiv.id); 38 console.log(oDiv.className); 39 40 var isRed = true; 41 oDiv.onclick = function () { 42 // if (isRed) { 43 // console.log(oDiv.style); 44 // oDiv.style.backgroundColor = 'green'; 45 // oDiv.style.width = '300px'; 46 // isRed = false; 47 // }else{ 48 // oDiv.style.backgroundColor = 'red'; 49 // oDiv.style.width = '200px'; 50 // isRed = true; 51 // } 52 oDiv.className += ' active'; 53 }; 54 55 var oImg = document.getElementsByTagName('img')[0]; 56 console.log(oImg); 57 58 var oBtn = document.getElementsByClassName('btn')[0]; 59 60 oBtn.onclick = function () { 61 62 // 点语法 setter和getter语法 63 64 oImg.src = './1.jpg'; 65 console.log(oImg.id); 66 67 oImg.id = 'lv'; 68 // oImg.alt= 69 // oImg.className 70 // oImg.title 71 } 72 73 }; 74 75 </script> 76 77 78 </body> 79 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .top-banner{ 12 /*position: relative;*/ 13 background-color: rgb(230, 15, 82); 14 } 15 .top-banner .w{ 16 width: 1190px; 17 position: relative; 18 margin: 0 auto; 19 } 20 .top-banner .banner{ 21 display: block; 22 width: 100%; 23 height: 80px; 24 background: url('./close.jpg') no-repeat center 0; 25 } 26 .top-banner .close{ 27 position: absolute; 28 right: 0; 29 top:0; 30 text-decoration: none; 31 color: white; 32 width: 20px; 33 height: 20px; 34 line-height: 20px; 35 text-align: center; 36 } 37 .hide{ 38 display: none; 39 } 40 41 </style> 42 </head> 43 <body> 44 <div class="top-banner" id="topBanner"> 45 <div class="w"> 46 <a href="#" class="banner"></a> 47 <a href="#" class="close" id="closeBanner">x</a> 48 </div> 49 </div> 50 <script type="text/javascript"> 51 // /需求：点击案例，隐藏盒子。 52 //思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。 53 54 window.onload = function(){ 55 // /1.获取事件源和相关元素 56 var closeBanner = document.getElementById('closeBanner'); 57 var topBanner = document.getElementById('topBanner'); 58 //2.绑定事件 59 closeBanner.onclick = function(){ 60 //3.书写事件驱动程序 61 //类控制 62 //topBanner.className += ' hide';//保留原类名，添加新类名 63 //topBanner.className = 'hide'; 64 //替换旧类名 65 topBanner.style.display = 'none'; 66 } 67 } 68 </script> 69 70 71 </body> 72 </html>
1 <!--要求实现效果：当鼠标悬停在img上时，更换为另外一张图片；鼠标离开时，还原为本来的图片。--> 2 3 <!DOCTYPE html> 4 <html> 5 <head lang="en"> 6 <meta charset="UTF-8"> 7 <title></title> 8 <script> 9 //window.onload页面加载完毕以后再执行此代码 10 window.onload = function () { 11 //需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。 12 //步骤： 13 //1.获取事件源 14 //2.绑定事件 15 //3.书写事件驱动程序 16 17 //1.获取事件源 18 var img = document.getElementById("box"); 19 //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件) 20 img.onmouseover = function () { 21 //3.书写事件驱动程序(修改src) 22 img.src = "image/jd2.png"; 23 // this.src = "image/jd2.png"; 24 } 25 26 //1.获取事件源 27 var img = document.getElementById("box"); 28 //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件) 29 img.onmouseout = function () { 30 //3.书写事件驱动程序(修改src) 31 img.src = "image/jd1.png"; 32 } 33 } 34 </script> 35 </head> 36 <body> 37 38 <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/> 39 40 </body> 41 </html>