1节点
1.1拷贝节点
节点.cloneNode() -拷贝指定节点，产生新的节点（浅拷贝不会拷贝节点中的子节点）
节点.cloneNode(true) -拷贝指定节点，产生新的节点（深拷贝会拷贝节点中的子节点）
var div2Node=document.getElementById('div2')
var newDiv2Node=div2Node.cloneNode()
var newDiv3Node=div2Node.cloneNode(true)
div1Node.appendChild(div2Node)
1.2替换节点
父节点.replaceChild（新节点，子节点） - 使用新节点替换父节点中指定的子节点
var imgNode=document.createElement('img')
imgNode.src='img/thumb-2.jpg'
div2Node.replaceChild(imgNode,div2Node.firstElementChild)
2DOM属性操作
2.1属性的点语法操作
节点.属性-获取属性值；节点.属性=新值 - 修改属性的值
var imgNode=document.getElementsByTagName('img')[0]
var name='src'
imgNode.title='图片1'
2.2通过相应方法对属性进行操作
a.获取属性
节点.getAttribute(属性名)
var srcAttr=imgNode.getAttribute('src')
console.log(srcAttr)
b.给属性赋值
节点.setAttribute(属性名,值)
imgNode.setAttribute('title','picture one')
c.删除属性
节点.removeAttribute(属性)
var buttonNode=document.getElementsByTagName('button')[0]
//让按钮可以点击
buttonNode.disabled=''
//添加属性
buttonNode.ytindex=100
//删除属性
buttonNode.removeAttribute('ytindex')
3 BOM基础
3.1什么是BOM - 浏览器对象模型（browser object model）
js中提供了一个全局的window对象，用来表示当前浏览器
js中声明的全局变量，其实都是绑定在window对象中的属性(使用window的属性和方法的时候，前面‘window.’可以省略)
3.2window基本操作
a.打开新窗口
window.open('http://www.baidu.com')
b.关闭窗口
window.close()
c.移动当前窗口
窗口对象.moveTo（x坐标，y坐标）
window.moveTo(230,230)
<button onclick="windowAction()">打开窗口</button>
function windowAction(){ //通过点击创建窗口按钮来创建并移动调整一个新窗口的大小
myWindow=window.open('','','width=200,height=300')
myWindow.moveTo(300,300)
window.focus()
d.调整窗口大小
myWindow.resizeTo(400,400)
e.刷新（窗口中没有内容，暂时看不到效果）
true ->强制刷新
window.reload(true)
f.获取浏览器的宽度和高度
innerWidth\innerHeight-浏览器显示内容部分的宽度和高度
outerWidth\outerHeight整个浏览器的宽度和高度
console.log(window.innerWidth,window.innerHeight)
console.log(window.outerWidth,window.outerHeight)
3.3弹框
a.alert（提示信息） - 弹出提示信息（带确定按钮）
window.alert('hello')
b.confirm（提示信息） - 弹出提示信息（带确定和取消按钮），返回值是布尔值，取消-false，确定true
result=window.confirm('是否删除')
console.log('=========:',result)
根据弹出的窗口选择是否删除标签的函数
function closeAction(){
var result=window.confirm('是否删除')
if( !result){
return
}
var divNode=document.getElementById('div1')
divNode.remove()
}
c.prompt(提示信息，输入框中的默认值) - 弹出一个带输入框和取消，确定按钮的提示框；
点取消返回值是null，点确定返回值是输入框中输入的内容
var result=window.prompt('message','default')
console.log(result)
4定时事件
4.1.setInterval(函数，时间) -
每隔指定的时间调用一次函数，时间单位是毫秒;返回定时对象
clearIntervar（定时对象） - 将到达指定时间的时间停止
获取节点
var pNode=document.getElementById('time')
var num=0
设置指定时间运行的函数
interval1=window.setInterval(function(){
//这儿的代码每隔一秒执行一次
num++
将时间更新到浏览器上
pNode.innerText=num
if(num>=10){
大于10就停止运行
window.clearInterval(interval1)
}
},1000)
4.2setTimeout(函数，时间)
隔指定的时间调用一次函数（函数只调用一次，就像定时炸弹）
clearTimeout(定时对象) - 停止定时
过八秒就运行函数
var message='爆炸，嘣嘣嘣'
var timeout1=window.setTimeout(function(){
console.log(message)
},8000)
停止运行函数
function clearBoom(){
window.clearTimeout(timeout1)
}
5自动跳转
<body>
<button>进入百度</button>
<div id="box1">
<p id="p1">5s后跳转到百度</p>
<button id="button1" onclick="now()">now</button>
</div>
</body>
获取节点
var p1Node=document.getElementById('p1')
var num=5
定时
interval1=window.setInterval(function(){
num--
将变化的内容更新到屏幕上
p1Node.innerText=num+'s后跳转到百度'
跳转
if(num<=0){
window.open('http://www.baidu.com')
终止事件
window.clearInterval(interval1)
}
},1000)
手动选择跳转函数
function now(){
window.open('http://www.baidu.com')
window.clearTimeout(interval1)
}
6事件
6.1事件三要素
事件三要素（事件源、事件、事件驱动程序）
点击按钮，就弹出一个弹框- 事件源：按钮，事件：点击，驱动程序：弹出弹框
6.2绑定事件
第一步：获取事件源
第二步：绑定事件
第三步：写驱动程序
6.2.1在标签内部给事件源的事件属性赋值
<标签 事件属性=‘驱动程序’></标签>
<标签 事件属性=‘函数名()’></标签>
注意：这个时候被绑定的驱动程序如果是函数，那么这个函数中的this关键字是window一般不用
6.2.2通过节点绑定事件1（会覆盖之前改变的属性）
标签节点.事件属性=函数
注意：这个时候函数中的this就是事件源
var btnNode=document.getElementById('btn2')
function changeColor(){
console.log(this)
btnNode.style.backgroundColor='skyblue'
}
btnNode.onclick=changeColor;
通过节点绑定事件2
标签节点.事件属性=匿名函数
注意：这个时候函数中的this是事件源
var btn3Node=document.getElementById('btn3')
btn3Node.onclick=function(){
this.style.color='red'
}
6.2.3通过节点绑定事件3（不会覆盖之前修改的属性）
节点.addEventListener（事件名，函数） -指定的节点产生指定的事件后调用指定函数
事件名 - 字符串，去掉on
注意：这个时候函数中的this是事件源；这种方式可以给同一个节点的同一事件绑定多个驱动程序
var btn4Node=document.getElementById('btn4');
btn4Node.addEventListener('click',function(){
this.style.color='yellow';
});
6.3获取事件对象
当事件的驱动程序是一个函数的时候，函数中可以设置一个参数，来获取当前事件的事件对象
var div1Node=document.getElementById('div1')
div1Node.onclick=function(evt){
参数evt就是事件对象
a.clientX/clientY- 事件产生的位置的坐标（相当于浏览器内容部分）
console.log(evt.clientX,evt.clientY)
console.log(evt.offsetX,evt.offsetY)
if(evt.offsetX<100){
this.style.backgroundColor='red'
}else{
this.style.backgroundColor='yellow'
}
}
7常见事件类型
7.1 onload
onload - 页面加载完成对应的事件
window.onload=函数
7.2鼠标事件
onclik - 点击
7.3键盘事件
onkeypress - 按下弹起
onkeydown
onkeyup
7.4输入框内容改变
onchange - 输入框输入状态结束
1.在页面加载完成后才去获取节点
window.onload=function(){
var pNode=document.getElementById('p1')
console.log(pNode)}
点击事件
pNode.onclick=function(){
alert('被点击')
}
pNode.onmouseover=function(){
this.innerText='鼠标进入'
this.style.backgroundColor='red'
}
pNode.onmouseout=function(){
this.innerText='输入移除'
this.style.backgroundColor='yellow'
}
pNode.onmousedown=function(){
this.innerText='鼠标按下'
this.style.backgroundColor='white'
}
pNode.onmouseup=function(){
this.innerText='鼠标弹起'
}
pNode.onmousewheel=function(){
this.innerText='滚轮滚动'
}
pNode.onkeypress=function(){
this.innerText='键盘按下'
}
在输入框中将输入的字母的小写转为大写
var textareaNode=document.getElementsByTagName('textarea')[0]
textareaNode.onkeypress=function(evt){
//键盘事件对象：key属性，keyCode属性-按键的值的编码
alert('键盘按下')
var keycode1=evt.keyCode;
if(keycode1>=97&&keycode1<=122){
keycode1-=32
}
textareaNode.innerText=String.fromCharCode(keycode1)
textareaNode.onchange=function(evt){
console.log('瞎点')
alert('瞎点')
}
}
