day24 js文档操作
- DOM(document object model) 文档对象模型；document指的是网页内容对应的对象，js会将整个网页转换成一个对象叫document；如果想要通过js会获取网页中内容，必须通过document来获取(这个对象系统自动创建，程序员只要会调用)；document结构是一个树状结构，树下面就是各种节点(node,是js中element对象，指向的是html中每个标签)
- element对象有哪些属性看element对应的html标签有哪些属性
//HTML标签在js中全部是对象，标签的属性就是对象的属性，双标签对应的内容是innerText和innerHTML
//通过id值来获取节点:
document.getElementById(id属性值)
obj.innerText // 只指向内容中的文本
obj.innerHTML // 指向的是内容的文本和标签
//通过class值来获取节点，返回的是一个包含一个或多个节点的数组
document.getElementsByClass(class属性值)
//通过标签名获取节点
document.getElementsByTagName(标签名)
//通过name属性获取节点
document.getElementsByName()
//获取父节点
//子节点.parentElement
//获取子节点，获取自定义节点所有子节点，不包含子节点的后代节点
//获取所有子节点：父节点.children
//获取第一个子节点
node.firstElementChild
//获取最后一个子节点
node.lastElementChild
//创建节点
document.createElement('input') //返回节点对象
//添加节点
parent.appendChild(子标签)
node.insertBefore(新节点,哪个节点之前插入)
//拷贝节点
node1 = node2.cloneNode() //复制指定节点，产生一个新的节点
//删除节点
parent.removeChild(parent.firstChild) //删除父节点中的第一个子节点
node.remove() //删除node节点
- BOM(browser object model)操作：js自带一个window对象，指向当前浏览器，js中所有的全局变量都是绑定在window对象上的属性，在使用的时候window可以省略
//打开新的窗口
new_window = window.open(url[,'百度','width=400,height=300']) //也可以直接写open(url)，返回新窗口的对象,新窗口大小宽高为400和300，中间为name属性
//关闭窗口：窗口对象.close()
window.close() //或者close()，关闭当前窗口
//移动窗口
window.movetTo(x,y) //x、y为横纵纵坐标
//获取窗口宽度和高度
window.innerWidth
window.innerHeight //inner获取浏览器能显示内容部分的宽高
window.outerWidth
window.outerHeight //outer是整个浏览器的宽高
//弹框
alert() // 只有确定按钮和按钮
res = comfirm(提示信息) // 点击确定返回值为true,取消为false
res = prompt(提示信息,输入框中的默认值)
//定时任务
timer = setTimeout(函数,延迟/定时时间,参数对象) //指定时间后调用指定函数，并且传入指定的参数，函数可以是匿名函数也可以是普通函数的函数名，时间单位是毫秒，实参对象以对象的方式给函数提供参数，最终返回一个定时器对象.设置定时器不会影响后面代码的运行
//清除定时
clearTimeout(timer) //清除使用setTimeout创建的定时器
//循环定时
timer = setInterval(函数,延迟/定时时间,参数列表) //每隔指定时间执行指定函数，参数由参数列表决定
clearInterval(timer) //清除由setInterval创建的定时器
//事件，js是事件驱动语言
//事件三要素：事件源、事件、事件驱动程序
//事件源发送某个事件就做什么事情(事件驱动程序)
//事件的绑定：1.在标签内部给标签的事件属性赋值
//通过在script中写函数，标签事件中绑定函数，这样this指向的是window，不推荐使用
//通过给节点对象的事件属性赋值
nodeObj.onclick = func
nodeObj = function(){}
//事件监听,可以给同一个节点的同一个事件绑定多个事件驱动程序
node.addEventListener(事件名称,函数)
//window.onload
window.onload = function(){
//表示在页面加载完成后执行function中代码
}
//鼠标事件
element.onclick=function(){} //鼠标点击事件
element.onmouseover=function(){} //鼠标悬浮事件
element.onmouseout=function(){} //鼠标移出事件
//键盘事件
element.onkeypress=function(){} //按下弹起
element.onkeyup=function(){} //键盘弹起
element.onkeydown=function(){} //键盘按下
//输入框事件
element.onchange=function(){} //输入框中按下回车出发事件
//事件对象
//每个事件驱动程序中都可以设置一个参数来表示当前事件对象，不同类型的事件对应事件类型不同
//鼠标事件对象：clientX/cleintY 鼠标点击位置到浏览器左边和顶部的距离；offsetX/offsetY 鼠标的位置到事件源
