html中的bom和dom,javascript的BOM和DOM笔记

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 获取的时候是存在边框

获取值时带边框

有边框时，也不获取边框

+