DOM(文档对象模型)

DOM(文档对象模型)
一.获取元素的方法
1、获取元素的方法
document.getElementById(); 通过id获取元素 获取结果是一个DOM对象 只有document对象存在这个方法  没有获取到元素返回null
context.getELementsByTagName('');  通过标签名获取元素，获取结果是一个DOM对象的集合（类数组） context（上下文）可以是document也可以是其他DOM对象
context.getElementsByClassName(); 通过类名获取元素，获取结果是一个DOM对象的集合（类数组）context（上下文）可以是document也可以是其他DOM对象
context.getElementsByName();通过name属性获取元素，一般不推荐使用，当获取name属性相同的radio或checkbox时使用
document.querySelector(选择器);  //获取单个
document.querySelectorAll(选择器); //获取多个
==============================================
二：节点关系属性
节点类型：nodeType
element 1
text 3
comment 8
previousSibling   上一个兄弟节点   （元素、注释、换行）
previousElementSibling    上一个元素兄弟节点
nextSibling   下一个兄弟节点   （元素、注释、换行）
nextElementSibling    下一个元素兄弟节点
childNodes   所有子节点   （元素、注释、换行）
children    所有元素子节点
firstChild
firstElementChild
lastChild
lastElementChild
parentNode  父节点
========================================
三：属性操作
样式: 设置 ele.style.attr
获取   ele.style.attr   只能获取行内样式
window.getComputedStyle(ele).attr  标准浏览器下获取样式
ele.currentStyle.attr   ie低版本
DOM对象属性操作
ele.attr   一般用来设置或获取标签的内置属性  也可以设置自定义属性，不改变DOM结构（不在标签上显示），只存在对象上
元素属性或标签属性
setAttribute() 可以设置内置属性（跟ele.attr没有区别）
设置自定义属性时会改变DOM结构（显示在标签上）
getAttribute() 获取属性值
========================================
四：节点的增删改
1.document.createElement('li')  创建元素节点
2.ELE.appendChild(ele);  在元素末尾插入指定的元素
3.oldEle.parentNode.insertBefore(newEle,oldEle);  在指定元素之前插入节点，这个方法需要指定元素的父元素调用
4.oldEle.parentNode.replaceChild(newEle,oldEle);  用新的元素替换指定的元素
5.ele.parentNode.removeChild(ele);  移除节点
6.ele.cloneNode()    浅克隆（只复制元素本身）
7.ele.cloneNode(true) 深克隆(复制元素及其所有后代)
列表排序
将获得li类数组的元素添加到数组中；用sort方法排序，遍历添加到ul中
============================================
五：事件
onclick   单击事件
ondblclick  双击事件
onmouseover   鼠标移入
onmousemove   鼠标移动
onmouseout     鼠标移出
onmousedown       鼠标按下
onmouseup    鼠标抬起

box.onmousedown = function (event) {//event事件对象
if(event.button === 0){
console.log('左键');
}else if(event.button === 1){
console.log('中键');
}else{
console.log('右键');
}
};

onkeydown   键盘按下
onkeyup    键盘抬起
inp.onkeydown = function (event) {//可以通过键盘事件对象的keyCode属性判断具体按下的是哪个按键
if(event.keyCode === 13){//enter
alert(this.value);
}else if(event.keyCode===70&&event.ctrlKey){
prompt('请输入要查找的内容！');
}
};

onfocus    获得焦点
onblur     失去焦点
onchange    表单元素值变化
onsubmit   表单的提交事件，绑定给form标签的

window:
onscroll   滚动事件
onresize   尺寸变化
事件发生时，js会给后面的事件处理函数传递一个事件对象，可以根据事件对象的具体信息去做相应的处理
<div onclick="fn()"></div>
ele.onclick = funciton(){}
ele.onclick = fn;