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不支持
网友评论