获取页面元素
1.通过id获取页面元素
var element=documenet.getElementById("id") 参数：字符串类型的id 返回值：元素，如果id不存在，就返回null
2.通过标签名获取元素
var nodelist=document.getElementsByTagName('li')返回值：伪数组，可以和数组一样遍历，用下标操作数组。注意不能给伪数组注册事件，注册事件必须把伪数组里面的元素取出来
3.h5新增的，低版本浏览器不支持
document.querySelector()通过css选择器获取一个元素
例如 document.querySelector(''#box")
document.querySelector(".demo")
document.querySelectorAll("#box")返回一个伪数组
注册事件
var btn=document.getElementById("#btn")
btn.onclick=function(){ 事件处理程序}
事件名称
onclick 点击事件
onmouseover 鼠标经过时触发
onmouseout 鼠标离开时触发
onmouseover事件，鼠标移动时会触发这个事件
onfocus 获取焦点时触发
onblur 失去焦点时触发
onkeydown 键盘按下事件，文本框取的是上一次的值
onkeyup 键盘弹起事件，文本框获取的是当前的值
ondblclick 双击事件
onscroll 每滚动一个像素就会触发该事件window.onscroll=function(){}
onresize 窗口被调整大小时发生 window.onresize=function(){}
onmousedown:鼠标按下事件
onmouseup:鼠标弹起事
this指的事件源
this指的是当前对象，在事件里面不能使用i了，原因：点击的时候i已经循环完了
this在function里面才有意义，this指的是当前对象，你点击哪个按钮，this就是哪个按钮
a标签阻止事件
rerutn false <a onclick="return false"></a> 或e.preventDefault()
<a href=“javascript:；”></a>
属性操作
修改标签的属性：title id class/className href src
设置和获取文本内容 innerHTML和innerText 和outerHTML、
innerHTML设置内容的时候，原有的内容会全部覆盖
innerHTML和innerText的区别
innerHTML是w3c标准，innerText是ie提出的，可以防止xss攻击，低版本火狐不支持
火狐有一个textContent属性跟innerText一样
解决浏览器兼容性的处理方式：、
1. 能力检测（常用）
2. 代理检测
3. 怪癖检测
表单元素属性
- value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
-
disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属
性
自定义属性操作
- getAttribute(name) 获取标签行内属性
- setAttribute(name，value) 设置标签行内属性
- removeAttribute(name) 移除标签行内属性
样式操作（style属性是一个对象）
box.style.width = '100px';
box.style.backgroundColor = 'red';
标签中的有一些属性带了'- 'background-color：red 在js中'-'是一个不合法的字符
到了style对象中变成了驼峰命名法
类名操作
box.className = 'show';添加show的类名
节点操作
找孩子
- childNodes:获取的是所有的子节点（包括标签节点、注释节点）
- children:获取的是所有的子元素（标签）
- firstChild: 获取第一个孩子节点， childNodes[0]
- firstElementChild:获取的是第一个孩子元素，相当于children[0]
- lastChild: 获取最后一个孩子节点
- lastElementChild: 获取最后一个孩子元素
找兄弟
- previousSibling : 获取的当前元素的上一个兄弟节点
- previousElementSibling: 获取当前元素的上一个兄弟元素
- nextSibling: 获取的当前元素的下一个兄弟节点
- nextElementSibling: 获取的是当前元素下一个兄弟元素。
找父亲
parentNode: 获取的是当前元素的父节点， 父元素
parentElement
添加节点
box.appendChild(p);可向节点的子节点列表的末尾添加新的子节点。
box.insertBefore(p,h1)把p添加到box子节点h1的前面，在现有的子节点前插入一个新的子节点
box调用insertBefore，有2个参数
克隆节点box.cloneNode(deep); true是深复制，复制标签和内容；false是潜复制，复制标签
创建节点document.createElement("tagName" ）
删除节点parent.removeChild(child)
节点操作，方法
appendChild()
insertBefore()
removeChild()
replaceChild()
节点层次，属性
parentNode
childNodes
children
nextSibling/previousSibling
firstChild/lastChild
window对象
window是一个全局对象，也可以说是javascript的顶级对象
1.像document和alert()和console.log()这些都是window的属性，其实bom的基本属性都是window的
2.定义在全局作用域下的函数和变量都会变成window的对象和方法
window.onload事件会在窗体加载完成后执行，通常称为入口函数
window.onload=function(){
窗体加载完成包括文档树的加载，还有图片和文件的加载
}
如果想获取图片的宽高，一定要在window.onload里面写，否则图片没有加载完成
获取不到图片宽高的问题
定时器
延时定时器
setTimeout(callbaclk,time)
参数1:回调函数，时间到了，指向的函数
参数2 :延时的时间
返回定时器的一个id，用于清楚定时器
var timer=setTimeOut(function(){},1000)
清除定时器 clearTimeOut(timer) 清除上面定时器的内容
间歇定时器
var timer=setInterval(function(){ },1000)
清除间歇定时器 clearInterval(timer)
location对象
location对象也是window的一个属性。location对应的是浏览器中对应的地址栏
location.href="www.baidu.com" 让页面跳转到百度
location;reload(true) 强制刷新
location.reload(false) 刷新 相当于F5
console.log(window.location.hash);//哈希值 其实就是锚点
console.log(window.location.host);//服务器 服务器名+端口号
console.log(window.location.hostname);//服务器名
console.log(window.location.pathname);//路径名
console.log(window.location.port);//端口
console.log(window.location.protocol);//协议
console.log(window.location.search);//参数
其他对象
window.navigator的一些属性可以获取客户端的一些信息
navigator.useAgent 浏览器版本
history对象
后退 history.back(); history.go(-1)
前进 history.forward（）; history.go(1)
screen对象shij
screen.width获取屏幕的宽度
offset家族
获取元素自身的大小和位置
offsetHeight 和offsetWidth
1.获取的是元素真实的宽度和高度
2.获取的数值类型，方便计算
3.只读属性，只能获取，不能设置
style.height与style.width
1.只能获取行内样式
2.获取的是字符串类型，需要转换
offsetHeight与offsetWidth的构成
offsetHeight=height+padding+border
offserWidth=width+padding+border
scroll家族
获取盒子内容的大小和位置
scroll加族有：scrollWidth scrollHeight scrollLeft scrollTop
1.scrollWidh和scorllHeight是盒子内容的真实宽度和高度
2.scrollTop盒子内容被滚动条卷去的头部高度，scrollLeft盒子内容被滚动条卷去左侧的宽度
页面卷去的高度和宽度兼容性封装
function scroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}
//如何使用
console.log(scroll().top);//获取页面被卷去的头部的距离
console.log(scroll().left);//获取页面被卷去的左侧的距离
client家族
获取盒子可视区的大小
client家族有 clientWidth clientHeight clientLeft clientTop
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}
三大家族的对比
//1. offset（非常常用）
//offsetWidth:盒子自身的宽度
//offsetHeight：盒子自身的高度
//offsetParent:有定位的父元素
//offsetLeft：盒子距离offsetParent的距离
//offsetTop：盒子距离offsetParent的距离
//2. scroll
//scrollWidth:盒子内容的宽度
//scrollHeight:盒子内容的高度
//scrollLeft:水平滚动条滚去的距离
//scrollTop:垂直滚动条滚去的距离
//onscroll:当滚动条滚动时触发
//页面滚动条滚去的距离 ：window.pageYOffset || document.documentElement.scrollTop
//3. client
//clientWidth:盒子可视区的宽度
//clientHeight:盒子可视区的高度
//clientLeft: borderLeft
//clientTop : borderTop
事件对象
当触发某一个事件时，都会产生一个事件对象event，获取事件对象的时候，浏览器存在兼容
性问题
1.对于现代浏览器，获取事件对象的时候，指定一个形参即可，这个形参就是事件对象
2.ie6 78 通过window.event 获取事件对象
事件对象的常用属性
事件对象有很多属性，很多属性并不常用，我们经常用到的鼠标的位置信息和键盘码相关信息
记录了鼠标位置信息的相关属性
screenX与screenY 光标相对于屏幕左上角 的水平位置和垂直位置
clientX与clientY 光标相对于浏览器可视区域的水平位置和垂直位置（不包括导航栏）
pageX与pageY光标相对于网页(文档document)左上角的水平位置和垂直位置(推荐使用)
offsetX偏移量是被点击的元素距左上角为参考原点的长度
记录了键盘码的属性
event.keycode 键盘按下的那个键盘码
document.onkeyup=function(){} 监听全局键盘，当每按一下键盘,当用户按键时，返回对应的键值
注册事件的新方式
addEventlistener与removeEventlistener 现在浏览器的注册方式，不会产生覆盖问题
第一个参数：事件类型
第二个参数：监听者，每次运行都需要执行这个函数
第三个参数：false
box.addEventlistener(click",fn1,false)
removeEventlistener语法，让注册的事件移除，不能用匿名函数
事件捕获和事件冒泡（基本上都用事件冒泡）
事件冒泡：当一个元素的事件被触发时，同样的事件也会在该元素的所有祖先身上触发
通常情况下，事件冒泡我们不用管，当对我们造成影响时，我们才阻止事件冒泡
link.onclick=function(e){
e=e || window.e
e.stopPropagation
}
事件捕获是火狐浏览器提出来的。ie678不支持事件捕获
事件的处理将从DOM层次的根开始，而不是从触发元素的目标元素开始
addEventListener的第三个参数为true时，表示事件捕获，事件被从目标元素的所有祖先元素，依次往下传递
事件委托
为什么要用事件委托？提高效率
如果给很多li注册事件，需要用for循环，这样需要给每个li都注册事件
var lis=document.querySelectorAll("li")
for(var i=0; i<lis.length;i++){
lis[i].onclick=function(){
this.style.background="red"
}
}
可以用事件委托的形式，给父元素注册事件
var ul=document.querySelecto("ul")
ul.onclick=function(e){
e.target.style.backgroundColor="red"
}
这个方式就是用了冒泡的原理，当我们点击li的时候，会冒泡到ul身上，相当于点击了ul
