#### 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
浙公网安备 33010602011771号