锐客网

  1. 首页 > it技术 > >

BOM浏览器对象模型和DOM文档对象模型

课上听讲：
BOM浏览器对象模型
Windows对象的常用属性
window.location=“https://www.baidu.com”;
把当前地址改变成百度的地址（刚开始会显示一下原界面）
confirm(“提示内容”) 根据选择做一个判断 返回布尔值
open(“地址”,“百度一下”,“height:500px”)
history
常用方法：

.forward
.back
.go
location
常用属性
location.href
location.host 返回主机名+端口
location.hostname 返回主机名
常用方法
location.reload()重新加载
location.replace(“www.baidu.com”)用新的文档替换
Document对象
.referrer 返回载入当前文档的URL（返回前页面的路径）
.url 返回当前文档的URL
setTimeout(方法名，时间毫秒)；等待
方法=setInterval(方法名，时间毫秒); 持续输出
清空时间clear**
innerText属性 对标签中的内容（制作时间表的时候用的）
Math对象
.random()
.ceil()
.floor()
.round()
firstchild 每个标签后面有一个空的节点
childNodes 返回集合list
下一个节点
nestSibling (回车也算一个节点，文本不算)
firstElementChild 获取第一个子节点
获取父节点
parentNode
p节点插入到li节点前面：ul.insertBefore(p,li);
移除节点： removeChild(a)
替换节点： replaceChild(a,b)
获取元素的样式 非IE浏览器 document.defaultView.getComputedStyle(li,null).color IE浏览器 document.getElementById(“id名”).currentStyle.color 兄弟用style吧 document.getElementById(“id名”).style.color
课后总结：
本次课程主要讲的是BOM和DOM
1.BOM：浏览器对象模型（Browser Object Model） BOM可以实现的功能：
1.弹出新的浏览器窗口
2.移动和关闭浏览器窗口以及调整窗口的大小
3.页面的前进、后退
window对象常用的属性
history 有关客户访问过的URL的信息
location 有关当前URL的信息
例如使用
window.location=“https://www.baidu.com”;
因为location是一个相关于当前信息的获取，如果如上运行就会把本地的当前路径修改，从而跳转修改过的网页
window对象的常用方法
prompt( ) 显示可提示用户输入的对话框
alert( ) 显示带有一个提示信息和一个确定按钮的警示框
confirm( ) 显示一个带有提示信息、确定和取消按钮的对话框
close( ) 关闭浏览器窗口
open( ) 打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( ) 在指定的毫秒数后调用函数或计算表达式
setInterval( ) 按照指定的周期（以毫秒计）来调用函数或表达式
history对象的常用方法
back（） 加载 history 对象列表中的前一个URL
forward() 加载 history 对象列表中的下一个URL
将本次浏览的网页设定为本身，然后再考绿是往哪跳:前进就用forward（），后退用back（）
go() 加载 history 对象列表中的某个具体URL
等价问题前提是必须有历史记录才行
history.back() == history.go(-1) 后退
history.forword() == history.go(1) 前进
【是历史跳转回来的才可以再返回去】
location对象的属性
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL
常用的方法
reload() 重新加载当前文档（相当于刷新）
replace() 用心的文档代替当前文档（相当于注销的效果，是不能返回原来的界面的）
Document对象
常用属性：
referrer 返回载入当前文档的URL
URL 返回当前文档的URL
用法
document.referrer 获取载入当前的文档的地址，可以用来使用在领奖界面跳转来的路径是不是正确（）
document.URL获取当前文档的地址
Date对象
目的是：自己传入参数的时候要符合一定的格式，不是让咱们规定这个格式的输出的
var 日期对象=new Date(参数)
参数格式：MM DD,YYYY,hh:mm:ss
相关方法
getDate() 返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay() 返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours() 返回 Date 对象的小时数，其值介于0～23之间
getMinutes() 返回 Date 对象的分钟数，其值介于0～59之间
getSeconds() 返回 Date 对象的秒数，其值介于0～59之间
getMonth() 返回 Date 对象的月份，其值介于0～11之间
getFullYear() 返回 Date 对象的年份，其值为4位数
getTime() 返回自某一时刻（1970年1月1日）以来的毫秒数
Math对象
ceil() 对数进行上舍入 Math.ceil(25.5); 返回26
Math.ceil(-25.5); 返回-25
floor() 对数进行下舍入 Math.floor(25.5); 返回25
Math.floor(-25.5); 返回-26
round() 把数四舍五入为最接近的数 Math.round(25.5); 返回26
Math.round(-25.5); 返回-26
random() 返回0~1之间的随机数 Math.random(); 例如：0.6273608814137365，他是一个无限接近1的值，所以你要是需要到几就向上[1-***]或者向下转换就行[0-(-1）]
2.DOM：文档对象模型（Documentr Object Model） 节点
removeChild( node) 删除指定的节点
replaceChild( newNode, oldNode) 用其他的节点替换指定的节点
style应用及涉及到的一系列事件
onclick 当用户单击某个对象时调用事件
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
className属性
HTML元素.className=“样式名称”
///
不重要的属性
offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素的宽度
offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度

标准浏览器
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
【BOM浏览器对象模型和DOM文档对象模型】或
Chrome
document.body.scrollTop;
document.body.scrollLeft;

    推荐阅读


    上一篇：为什么Vue 组件中的 data 不是对象而是函数（）

    下一篇：range的用法和for循环