属性操作的类型：
一：属性
1，元素属性的操作：
01，通过.属性名来获取，获取出来的都是字符串
赋值：.属性值=属性值
02，属性【’属性名‘】=属性值
02和01的区别：.的后面不能跟变量，【】中可以
注释：01/02都是针对已经在行间（html）存在的属性，才能操作，如果没有该属性，会弹出undefined
2，关于data属性：
定义：data-属性
操作方式：获取：dataset.属性
设置属性；dataset-属性=属性值
删除：delete dataset.属性
注意：关于dataset属性的操作是html5 中提供的js方法
3，关于attribute（属性）
用处：不仅可以获取自定义的属性，系统的属性也可以获取
操作方法：获取属性：getAttribute（‘属性名’），如果没有获取成功或显示null
添加属性：setAttribute（‘属性名’，‘属性值’）
删除属性：deleteAttribute （‘属性名’）
注意：不要混着用：例如用data方式添加，Attribute方式删除
二：用dom操作样式：
1，行间样式：style：（
获取：.style
设置样式：.style.样式=样式值
备注：行间样式会先加载所以放哪里都可以，domo级事件的存放位置w3c事件存放位置应该在最下面和header里面
2，.className
3, getComputedStyle:
getComputedStyle(元素对象).样式 兼容高级浏览器
console.log(getComputedStyle(o).backgroundColor)
元素对象.current style.样式 可以兼容i系列
4，封存一个函数：兼容目前所有浏览器
function 元素名（元素对象，属性名）{
if（元素对象.currentStyle）{
return 元素对象.currentStyle【属性名】
}else{
return getComputedStyle(元素对象).【属性名】
}
}
var oDiv=document.querySelector('div');
console.log(getStyle(oDiv,'width'));
5，
操作样式和offsetWidth/offsetHeight的区别：
.style和getcomputedstyle(元素对象).【属性名】获取出来的带单位
offsetwifdth 获取出来的不带单位，获取出来的是数字
var oDiv = document.querySelector('div');
console.log(oDiv.style.width);200px
console.log(oDiv.offsetWidth);200
console.log(getComputedStyle(oDiv).width);200px
三：获取可视区的大小：
1，document 的定义：一个文档，在js中专门有document对象
documentelement的意思：即html 》 document.body body
console.log(document.documentElement)
console.log(document.body)
2，可视区大小的获取：
document.documentElement.clientHeight
document.documentElement.clientWidth
3，低版本ie中获取可视区大小：document.body.clientHeight
4，兼容性： var cliH=document.documentElement.clientHeight || document.body.clientHeight
四：滚动事件/滚动距离
1 ,滚动事件：window.onscroll
2 滚动距离：document.documentElement.scrollTop
document.documentElement.scrollLeft
3，低版本ie中获取可视区大小：document.body.scrolltHeight
4，兼容性：document.documentElement.scrollTop || document.body.scrollTop
五；物体的位置信息：
1，位置信息：offset
2，offsetWidth/hight/top/left= 宽高+padding+border
3：offseheight和scrolltop的区别：
offset距离定位父级的距离，如果没有定位父级，距离body的距离
scroll 宽高+padding
如果内容没有超出范围获取的值是宽高+padding。如果内容超出，获 取的是内容大小,overflow:hidden以后还能获取
五五五：bom：
1，定义：bom是浏览器对象模型
2，dom &bom：
dom里面的东西有很多兼容性问题，但都可以解决，bom不兼容的更多，且不能解决
3.所有bom下的东西都在window里面，使用window里面的属性和方法。都可以不用加window
01：弹框类：alert（） comfirm()确认框 prompt()提示框
02：定时器： setInterval()/ clearInterval()||setTimeout()/clearTimeout()
03：打开一个新窗口：
open（地址，打开方式{-blank/-self}）
测试结果：chrome：拦截/ ff 阻止/ ie 直接打开了
04：关闭一个窗口：
close（）；括号里不加东西
chrome 直接关闭/ ff 直接关闭// ie 询问你是否关闭
4，地址：
location
1：地址栏的构成：
协议+域名+端口号+路径地址+数据+锚点
[http://](http://www.baidu.com:8080/pages/list.html?a=1&b=2#xxx) [协议](http://www.baidu.com:8080/pages/list.html?a=1&b=2#xxx) [www.baidu](http://www.baidu.com:8080/pages/list.html?a=1&b=2#xxx)域名[.com:8080/](http://www.baidu.com:8080/pages/list.html?a=1&b=2#xxx)端口号[pages/list.html](http://www.baidu.com:8080/pages/list.html?a=1&b=2#xxx)路径地址[?](http://www.baidu.com:8080/pages/list.html?a=1&b=2#xxx)数据[a=1&b=2#xxx](http://www.baidu.com:8080/pages/list.html?a=1&b=2#xxx)锚点
数据; search
锚点：hash
路径： href
---------
port：端口
protocol：协议
pathname：文件路径
hostname：域名
2，页面跳转的方法：
01：a链接：
02：open
03：location.href
3，刷新页面的方法：
01：a链接：里面的href不填，如果填#的话，或跳到页首
02：.reload（）
03：go（里面填数字-1/0/1）
4，历史记录
history:
.forward()前进
.back（）后退
.go（数字）
1：前进一页/0刷新/-1后退一页
5，事件
01：onclick 点击
02：onmouseover 鼠标移上去
03：onmouseout 鼠标移出去
04：onblur 失去焦点
05：onfocus 聚焦
06：onload 加载
07：onresize 窗口缩放
08：onscroll 鼠标滚动
09：onsubmit 当提交事件为真时
事件的添加方式：
01：在行间添加：
html事件处理方式：
02:获取元素加事件：
dom0级事件方式：
oidv.onclick=function(){
优点：html，js，css，三者分离，可读性强
缺点：同一个元素相同的事件只能加一次
03.获取元素加事件：
dom2级事件处理方式：（就是通过增加函数，来实现同一个元素的多个点击时间）
用法：obtn . addEventListener ('不加on的事件名'事件执行的函数，是否事件捕获)
function show() {
alert(1)
}
function show2() {
alert(2)
}
window.addEventListener('load', show, false);
window.addEventListener('load', show2, false);
注释：如果需要原生态开发，那么必须用dom2级事件处理方式/且这种方法只兼容高级浏览器
注意，使用添加addEventListener函数后，在remove，中间的show只能是函数名字
04，在ie低版本dom2级事件的处理方式：
obtn . addchEvent（'加on的时间名'，事件执行的函数）
（这种方式，兼容ie11的ie系列，在ie9以下，先加的事情后触发）
function 函数名(对象，不加on的事件名，函数){
if（对象.addEventlistener）{
对象.add eventlistener（事件名，函数，false）
}else{
obj.attchevent（’on‘+事件名，函数）
}
}
05，关于事件的删除：
事件的删除
oDiv.onclick=function(){}
oDiv.onclick=null;
oBtn.removeEventListener('不加on的事件名',事件执行的函数,是否事件捕获);
obj.detachEvent('加on的事件名',事件执行的函数)
function removeEvent(obj,evName,fn){
if(obj.removeEventListener){
obj.removeEventListener(evName,fn,false);
}else{
obj.detachEvent('on'+evName,fn);
}
}
