BOM
BOM:浏览器对象模型
1、全局默认对象是挂在windows上的;
2、Windows下的子对象:
(1)location 刷新
刷新的方法:window.location.reload( );
window.location.href 当前页面的 URL,可以获取,可以修改(页面跳转)。
window.location.hostname web主机的域名
window.location.pathname 当前页面的路径和文件名
window.location.port web主机的端口 (80 或 443)
window.location.protocol 所使用的 web 协议(http:// 或 https://)
window.location.search 请求参数(?后面的内容)
(2)window.navigator
navigator.appName 返回获取当前浏览器的名称。
navigator.appVersion 返回获取当前浏览器的版本号。
navigator.platform 返回当前计算机的操作系统。
navigator.userAgent 返回浏览器信息
(3)history
history.go(1) 参数可写任意整数,正数前进,负数后退
history.back( ) 后退
history.forward( ) 前进
(4)screen: 屏幕
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
(5)window下的弹框方法
alert( ) prompt( ) confirm( )
(6)定时器
超时定时器 间隔定时器
setTimeout setInterval
clearTimeout clearInterval
(7)window.onload 页面加载
(8)window.onscroll 滚动条兼容
(9)window.onresize 浏览器窗口大小触发事件
DOM
DOM:文档对象模型
获取DOM节点:
1、 document.getElementById(id名)
2、getElementsByTagName(标签名)
得到的是一个集合(不止一个,是一堆)
3、getElementsByName( ) 通过Name值获取元素,返回值是集合,通常用来获取有name的input的值;
注:1、不是所有的标签都有name值;
2、低版本的浏览器会有兼容问题;
4、 children属性,获得DOM元素的所有子元素;返回值是集合
5、parentNode属性,获得DOM元素的父级元素
6、getElementsByClassName(class名称),但是:IE8以下不能用
7、ES5选择器:
document.querySelector ( ) 一旦匹配成功一个元素,就不往后匹配了
document.querySelectorAll ( ) 匹配到所有满足的元素, 支持IE8+;
属性获取和操作:
1、getAttribute( )获取元素的属性值,他是节点的方法!所以前缀必须是节点!
document.getElementById( ID值 ).getAttribute( )
什么是元素属性呢? class就是元素属性,写在标签内的所有东西都是标签属性, 比如link的href比如img的src....都是元素属性。
元素自带的属性可以直接用语法获取,但是自定义属性需要 getAttribute() 和 setAttribute( ) 方法。
2、setAttribute( )设置元素的属性。同上;
有些小小的兼容性问题,低版本IE不兼容;
设置的属性永远都是字符串类型
3、removeAttribute( )删除属性;同上;
兼容性问题同上;
DOM元素类型
(元素、文本和属性)
1、node.Name 节点名称
2、node.Type 1=元素节点、2=属性节点、3=文本节点
元素节点:标签名(大写)
属性节点:属性名称
文本节点:#text
适用场所:网页换肤、隔行变色。
操作DOM
作用:增、删、克隆节点
创建节点
var oDiv = document.createElement("div");
克隆节点
clonedNode = Node.cloneNode(boolean) 只有一个参数,传入一个布尔值,true表示深客隆,复制该节点下的所有子节点;false表示浅克隆,只复制该节点
插入节点
parentNode.appendChild(childNode); 将新节点追加到子节点列表的末尾
parentNode.insertBefore(newNode, targetNode); 将newNode插入targetNode之前
替换节点
parentNode.replaceChild(newNode, targetNode); 使用newNode替换targetNode
移除节点
parentNode.removeChild(childNode); 移除目标节点
node.parentNode.removeChild(node); 在不清楚父节点的情况下使用
childNode.remove( ) IE不支持