1 BOM(Browser Object Model 浏览器对象模型)
var a = 123;
alert(window.a)//123
2、window下的子对象
A、location
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 请求参数(?后面的内容)
window.location.reload();
刷新页面的方法。一般情况下给reload()传递一个true,让他刷新,并不使用缓存。
缓存的东西一般为js文件,css文件等。
用这个方法可以让自己不能动的页面动起来了。刷新当前页面。
B、window.navigator
navigator.appName 返回获取当前浏览器的名称。
navigator.appVersion 返回 获取当前浏览器的版本号。
navigator.platform 返回 当前计算机的操作系统。
以上属性已经在逐渐被抛弃了。
一个新的属性将替代这些属性。
navigator.userAgent 返回浏览器信息(可用此属性判断当前浏览器)
history.go(1) 参数可写任意整数,正数前进,负数后退
history.back() 后退
history.forward() 前进
D、screen: 屏幕
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
3、window下的弹框方法
alert() prompt() confirm()
4、定时器
超时定时器 间隔定时器
setTimeout setInterval
clearTimeout clearInterval
5、window.onload
6、window.onscroll
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; //兼容
7、window.onresize 屏幕分辨率
2 DOM(Document Object Model 文档对象模型)
获取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 增、删、克隆节点
创建节点
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不支持