#### 11.8.3 BOM的系统对话框 bom的系统对话框： - window.alert("liujia") 直接在页面中弹出对话框 - window.confirm("你确定要删除文件吗？") 弹出是否眼删除文件，并且有确定和取消按钮 - window.prompt("今天的天气是？") 会弹出对话框让你输入内容 定时器方法 ```html <script type='text/javascript'> //1.在5秒之后执行对应的操作，可以做异步 window.setTimeout(function(){ console.log("111"); },2000) console.log("222") //2周期性定时器 var num = 0; var timer = null; //开启定时器 timer = window.setInterval(function{ num++; if(num === 0){ clearInterval(timer); //清除定时器 } console.log(num); },2000) </script> ``` #### 11.8.4 DOM D:docunment文档 O：object M；modle 获取节点的是三种方法： - var box = document.getElementById("box") 通过id获取单个节点对象 - var box = document.getElementsByTagName('div') 通过标签名来获取节点对象 - var lis2 = document.getElementsByClassName("active"); 通过类名来过去 对样式的操作： 1 获取事件源对象 - var box = document.getElementById('box'): 2.绑定事件并执行更改 - box.onmpuseover = function(){box.style.backgroundColor = 'red'} 对属性的操作： 1.获取事件的节点 - var p1 = document.getElementById('id'); 2.设置属性 - console.log(p1.getAttribute('class')) 必须要获取属性 - p1.setAttribute('class',123) 如果原来存在class就对它进行更改，如果不存在就进行添加 节点的创建删除： 创建节点： - var li1 = document.createElement('li') 创建节点 - li1.innerText = 'liujia' 在节点中添加内容，但只能设置文本 - li1,innerHTML = ‘<a href="#"></a>’； 可以设置html - ll1.setAttribute("class","avtive"); - li1.children[0].style.color = 'red'; 便利数据操作页面： ```html <script> var box = document.getElementById('box'); var date = [ {id:1,name:'小米2',subname:"前置双摄",price:1999} {id:1,name:'小米4',subname:"前置双摄",price:2999} {id:1,name:'小米5',subname:"前置双摄",price:3999} {id:1,name:'小米6',subname:"前置双摄",price:4999} {id:1,name:'小米8',subname:"前置双摄",price:5999} ] for (var i=0;i<data.length;i++){ var li = document.creatElement('li'); li.innerHTML = `<p class='name'>${data[i].name}</p> <p class="subname">${data[i].subname}</p> <span class="sprice">${data[i].price]元<span>` box.appendChild(li ) } </script> ``` 切换图片： ```html <body> <div id = "box"> <img src="images/1.jpg" alt="" id="imgbox"> </div> <button id = "prev">上一张</button> <button id = "next">下一张</button> </body> <script> var imgbox = document.getElementById('imgbox'); var next = document.getElementById('next'); var prev = cocument.getElementById('prev'); var num = 1; next.onclick = function(){ nextImg(); } function nextImg(){ num++; if(num === 5){ num = 1; } imgbox.src=`images/$[num}.jpg`; } setInterval(nextImg,100) prev.onclick=function(){ prevImg(); } function prevImg(){ num = 5; num -= 1; if(num === 0){ num=5 } imbox.src=`images/${num}.jpg` } setInterval(prevImg,100) </script> ``` 函数对象中，可以通过那两个方法改变函数内部this的指向 ```html function fn(){ console.log(this); //this指向了window } fn.call(); fn.apply(); ``` 如何设置节点对象的样式、属性、类？ ```html 设置样式 obj.style 设置属性： obj.setAttribute(name,value); obj.getAttribute(name); obj.className obj.title ``` 节点对象的创建，添加，删除分别用什么方法？ ```html var op = document.creatElement('p'); box.appendChild(op); box.insertBefore(newNode,oldNode); box.removeChild(op); ``` l列出你所知道的js事件？ - onclick - onmouseover - onmouseout - onchange - onselect - onsubmit - onload 定时的方法有那两个？写出对应的方法，并说明含义？ setTimeout(callback,毫秒)一次性任务，延迟操作，异步 setInterval(callback,毫秒)周期性循环任务 动画 css transtion tranform