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;


Chrome
document.body.scrollTop;
document.body.scrollLeft;

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值