BOM和DOM编程:
BOM(BOM(browser object model) 浏览器对象模型
DOM(document object model) 文档对象模型
window === 浏览器
history 历史记录
location 路径
screen 屏幕
navigator 浏览器内核信息
document 文档DOM
1、window.open() 打开新窗口
2、window.close() 关闭当前窗口
3、window.moveTo() 移动当前窗口 (相对于左上角)
4、window.resizeTo() 调整当前窗口的尺寸
5、window.moveBy() 移动当前窗口 (相对于鼠标)
6、window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面
history 历史记录
1、history.length 当前站点的浏览次数
2、history.back() 返回上一页
3、history.forward() 返回下一页
4、history.go() -1 表示向后,1表示向前
screen 屏幕
1、screen.width 屏幕宽度
2、screen.height 屏幕高度
3、screen.availWidth 获取除任务栏外系统屏幕的宽
4、screen.availHeight 获取除任务栏外系统屏幕的高
navigator 浏览器内核信息
1、navigator.userAgent 对象包含有关访问者浏览器的信息
location 位置
1、window.location.href 当前url
2、window.location.hostname 主机名称
3、window.location.host 主机名称 + 端口
4、window.location.port 端口
5、window.location.protocol 协议
6、window.location.search ?后面的值
7、window.location.hash 锚点后面的值
Javascript中认为document根节点
document节点树
获取DOM对象的方式:
1、通过id直接调取,不推荐,知道就好
2、通过id,使用document对象getElementById方法来获取
innerHTML表示获取msg里面的内容
3、通过class类名称,来获取(返回值是一个列表)
通过下标增加
4、通过标签名称
里面可以加标签
5、通过name属性来获取:(name)属性是表单元素专有的,所以不建议使用
通过name来获取
二、操作DOM对象的内容
1、操作DOM对象的内容有三种方法:innerHTML
获取div里面的所有包括标签
innerText:操作内容的文本
非w3c标准
innerContent:
w3c标准
注意xss和csrf攻击:使用inner时一定要注意使用安全的数据
操作DOM对象的属性:
1、DOM对象.属性 修改新的:DOM对象.属性=新值
2、DOM对象["属性名称"]
3、DOM对象.getAttribute("属性名称");DOM对象.setAttribute("属性名称", "新值");
setAttribute两个值,第一个是要获取的,第二个是可以覆盖第一个的
操作DOM对象的样式:
通过DOM对象.style.样式名称这种方式,获取样式值,只能获取行内样式,无法获取页面或者外联样式
w3c为大家提供了一个api,用于获取样式
该api存在兼容性,IE9+:console.info(_show.style.width);
针对于IE8及其以下浏览器,MS专门提供了一个api:
console.info(_show.currentStyle.height)
获取宽、高
另一种方法: 因为获取宽高的值进行操作,那么使用之前的方法,获取的值是携带单位的字符串操作时需要先去掉单位,计算完成后,赋值时又需要拼接单位, offsetWidth offsetHeight 获取的时候是存在边框
获取值时带边框
有边框时,也不获取边框
+