蓝旭第五周预习

BOM模型与DOM模型

BOM模型

• 浏览器对象模型BOM（Browser Object Model）： 提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

 1、windows对象

window对象是BOM的核心，window对象指当前的浏览器窗口。 window对象是整个浏览器对象模型中的顶层对象，它下有很多子对象（包括document对象（DOM））。

 

alert()对话框

alert()方法：在页面上弹出一个只有确定按钮的对话框

window.alert('hello'); 

window作为顶层对象，可以省略

confirm()对话框 

if(confirm('确定要删除吗')){
    console.log('删除');
}else{
    console.log('不删除');
}

open()与close()方法

• open()方法：打开一个浏览器窗口。
• close()方法：关闭一个浏览器窗口。

 

setTimeout()定时器

setTimeout()函数能够在指定的时间间隔后，调用一个函数（此函数称为回调函数）。

注意：setTimeout()在指定的时间间隔后，只调用一次。

 setTimeout(function(){
    console.log('hello，3秒到了');
},3000);

function callback(){
    console.log('hello，3秒到了');
}
setTimeout(callback,3000);

let callback = function(){
    console.log('hello，3秒到了');
}
setTimeout(callback,3000);

setInterval()定时器

setInterval()函数能够在指定的时间间隔后，调用一个函数（此函数称为回调函数）。

注意：setInterval()在指定的时间间隔后，可以调用无限多次。

 let callback = function(){
    console.log('hello，3秒到了');
}
setInterval(callback,3000);

location对象

• location用于获取或设置地址栏中的url，并且提供若干方法用于刷新或跳转等。
• location.reload() 页面重新加载（相当于刷新按钮） location.href 返回或设置完整的url

history对象

1. history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
2. history对象就是访问后的URL。
3. history.back() 加载history列表中的前一个URL，也就是后退。
4. history.forward() 加载history列表中的下一个URL，也就是前进。
5. history.go() 加载history列表中的某一个URL。0：当前； -1：相当于back()； 1：相当于forward()

创建两个html文件，第一个html文件中书写：

<a href="b.html">跳转b页面</a>

第二个html文件中书写：

<a href="javascript:history.go(-1)">回退</a>

 DOM模型

    window对象下的document对象就是DOM模型。 DOM描绘了一个层次化的节点树，每一个节点就是一个html标签，而且每一个节点也是一个DOM对象。 

 

获取DOM对象常用方法

获取DOM对象的常用方法有如下几种：

1. getElementById() 通过元素的ID属性获取DOM对象，获取的是一个DOM对象。
2. getElementsByTagName() 通过元素的标签名获取DOM对象，获取的是一组DOM对象。
3. getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是一组DOM对象。
4. getElementsByName() 通过元素的name属性获取DOM对象，获取的是一组DOM对象。

 

操作DOM对象属性

操作DOM对象的属性，常用的都有两种方式：

通过DOM对象直接操作属性：

通过DOM对象中封装的方法操作属性：

1. setAttribute() 设置元素的属性值；
2. getAttribute() 获取元素的属性值；
3. removeAttribute() 移除元素的属性值；

 

DOM对象中的常用属性

innerHTML属性：用于设置或获取HTML 元素中的内容。

 

innerText属性：用于设置或获取HTML 元素中的纯文本。

 

className属性：用于设置或获取DOM对象的类样式

 

 

style属性：用于设置或获取DOM对象的style样式

 

 遍历DOM数组

在实际开发中，经常会同时操作多个DOM对象，此时，可以使用循环来遍历DOM数组。

 

 

DOM编程

事件