DOM操作

什么是DOM？

DOM是文档对象模型，是W3c组织推荐的可处理可扩展编辑语言的标注编译接口;

什么是节点？

主要节点：元素节点、属性节点、文本节点
元素节点：,,,

关于节点(Node)：HTML文档中包含各种标签元素，这些标签元素按照层级关系和结构，大致可以分为：父元素，子元素，同胞元素，
这些元素的层级关系和结构就构成了一个节点树的结构，在节点树中，父元素、子元素、同胞元素 又被称为 父节点(parentNode)、
子节点(childNode)、同胞节点(siblingNode)。

获取所有节点(包含所有节点，除了IE之外所有浏览器都会把空格和换行符解析成文本节点;)

childNode  //获取元素的所有子节点;

firstChild  //获取第一个子节点;

lastChild  //获取最后一个子节点;

proviousSibling  //上一个兄弟节点;

nextsibling //下一个兄弟节点;

nodeName  //获取元素对象的名字  元素节点返回标签，内容节点返回#text;

tagName  //获取元素对象的标签;

nodeValue   //获取节点的值，标签节点没值null,属性节点值为未定义;

nodeType  //获取元素的属性;  1为元素节点，2为属性节点，3为文本节点  8为注释  9为文档;

select相关的属性

select.value //当前选中的值;

select.selectedOptions //获取选中的集合,加上下标可以直接使用;

select.selectedIndex //获取选中的下标;

获取/查询DOM

document.documentElement //获取HTML;

document.getElementById() //获取id名，单一属性;

document.getElementsByClassName()  //获取class名，获取的是集合;

document.getElementsByTagName()  //获取标签名，获取的是集合;

document.getElementsByName()  //通过Name属性，获取集合，一般用于form表单里面;

document.querySelector()  //获取第一个出现在文本之中的元素，可以配合选择器，伪类元素（nth-child）选择元素 获取的是单一的元素;

document.queryselectorAll() //获取一组出现在文本中的元素，同上，但是她获取的是一个集合;

---

元素节点的遍历

---

parentElement  //向上遍历父元素;

children //向下遍历所有子元素;

firstElementChild  //向下遍历第一个子元素;

lastElementChild  //向下遍历最后一个子元素;

previousElementSibling  //获取上一个兄弟节点;

nextElementSibling   //获取下一个兄弟节点;

contains()  //判断是否包含此节点;

---

修改DOM

修改元素内容;

document.createTextNode()  //创建一个文本节点;

innerHTML()  //修改元素中的内用，但是可也添加标签元素，比如可也插入</br>,文本会换行;

innerText()  //修改元素中的内容，不能插入标签元素;

textContent() //修改元素中的内容，不能插入标签元素;

---

元素节点的增删改

document.createElement("body")  //创建一个标签元素，参数是标签名；

父类节点.appendChild(要添加的节点)  //添加节点，向父类末尾增加节点;

父类节点.insertBefore(要添加的节点，添加在什么位置之前)  //自定义添加位置;

父类节点.removeChild()  //删除节点

父类节点.replaceChild(newEle,oldEle)  //替换节点

before()   //向目标元素之前添加元素,也可以添加文本节点（不能添加标签字符串）;

after()   //向目标元素之后添加元素（同上）;

insertAdjacentHTML(position,元素);  这个方法更为灵活, HTML字符串，文本，但是不能插入元素对象;

//position为 beforeBegin插入开始标签之前  afterBegin插入开始标签之后;  beforeEnd插入结束标签之前  afterEnd插入结束标签之后;

要克隆的节点.cloneNode()  //克隆节点，里面的参数为布尔值，如果为真，就进行深拷贝（拷贝元素的内容），为假，为浅拷贝（只拷贝标签）

---

class属性节点操作元素样式;

---

classList.add() //添加类名，不会替换 原本类名;

classList.remove()  //删除类名;

classList.toggle()  //判断是否有这个类名，如果有，删除这个类名，没有，则添加这个类名(开关);

classList.contains() //判断是否包含此类名，有则true;无则false;  

className=""  //不是方法，直接修改类名，会覆盖原来的class名字;

---

其他属性节点的增删改查

---

属性名.属性节点='';  //增删改查;

通过打点自建的自定义属性，不会显示在HTNL列表中，但是属性值还在js之中的;

通过在标签之中建立的自定义属性，用打点调用不能实现调用,但可以使用getAttribute()获取和设置HTML中的节点;

属性名.getAttribute(属性名)  //获取节点的值;

setAttribute(属性名，属性值) //替换属性的值,修改;

removeAttribute(属性名) //清除属性名和属性值 不会保留属性名;

hasAttribute(属性名) //判断是否包含这个属性节点，有返回true，没有返回false,自定义属性也是可以判断的;

attribute() //获取属性列表，一组数据，集合;

---

event对象

e = e || window.event;  //兼容

pageX/Y  相对于整个文档/页面的位置;(0，0点左上角)

clientX/Y  相对于可视窗口的位置;(左上角)

screenX/Y  相对于整个电脑屏幕的位置;(左上角)

offsetX/Y  相对于元素本身左上角的位置;

target  //触发事件的对象（于this不同）;

currentTarget //绑定事件的元素;(于this作用相同) 

preventDefault();  //清除默认操作;

stopPropagation()  //阻止事件冒泡到父元素;

---

事件模型

addEventListener(type,function,boolean); （0级事件）第三个值为真，在捕获阶段执行，为false,在冒泡阶段执行，默认为false;
事件名.removeEventListener(‘type’,function,boolean); //删除事件监听事件,注意：removeEventListener() 不能移除匿名函数;

总结:关于addEventListener(),（2级事件）相比于元素对象属性的匿名函数(后面的会覆盖前面的事件)，可也重复添加同一个事件，先后顺序先捕获，后冒泡，同是目标阶段，跟书写顺序有关;

鼠标事件

click  //鼠标点击事件;(按下和松开)

mouseup  //鼠标松开事件;

mousedown  //鼠标按下时触发事件;

mouseover //鼠标移入事件;

mouseenter  //鼠标移入事件;

mouseleave  //鼠标移出事件;

mouseout  //鼠标移出事件;

mousemove  //鼠标移动事件;

onmousewheel  //鼠标滚轮滚动事件
{
  滚动事件的event对象

  daltaX/Y  //判断是否向上或者向下滚动；
}

表单事件

focus //获取焦点事件;

blur //失去焦点事件;

input  //输入事件;

compositionstart  //当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。

compositionend  //当用户使用拼音输入法结束输入汉字时，这个事件就会被触发。(需要input配合延时器使用);

change  //内容被修改事件，（先获取焦点，修改内容，在失去焦点时触发）;change事件一般绑定在多选，单选按钮，下拉框，日期，color等

select  //选中事件，鼠标选中文本框之后触发的事件;

reset  //重置事件;(会刷新页面要组织页面刷新才能操作);

submit  //提交事件;(会刷新页面要组织页面刷新才能操作);

document.forms[0]  //获取forms表单的所有对象，返回一个数组;

拖拽事件

dragstart  //开始拖拽事件;  使用 event.dataTransfer.setData('数据名') 进行数据传输;  draggable = true; 设置标签是否可以拖拽;

dragenter  //拖拽进入事件   当拖拽进入范围执行一次事件;

dragover //拖拽中;   event.; 阻止默认事件;

drop  //放下拖拽的元素;  event.dataTransfer.getData('数据名');

滚动事件
window.onscroll  //滚动事件

键盘事件

keydown  //键盘按下事件;

keyup   //键盘松开事件;us

keypress  //键盘频发事件；

e.key  //返回点击键盘的键;

e.keyCode  //返回点击键盘按键的ascii编码;

自定义事件

//自定义事件的执行流程
//1，先创建一个事件；
//2，给创建的事件初始化;
//3.给调用者派发事件(触发事件);

实例化事件对象Event() //composed: 事件是否会触发shadow DOM,其他于CustomEvent()相似;

方法一::
let Event=document.createElement(type) //创建一个事件，type是事件类型;

Event.initCustomEvent('事件名称'，true,true,'事件的数据')  //初始化事件对象；第一个参数：对象的名称,第二个设置事件是否可以冒泡;
                                                // 第三个设置事件是否阻止默认行为；第四个传递的数据;
 调用对象.dispatchEvent(myEvent)     //派发事件（触发）;

 方法二::
 let Event= new CustomEvent(type,data); //实例化创建一个定义事件    type事件类型,data传输的数据;  

 let data={detail: '数据',bubbles: true,cancelable: true,} //定义字典类型的数据 bubbles是否冒泡;  cancelable是否可以取消事件;

  元素对象.dispatchEvent(Event); //派发 (触发)；  
    
detachEvent（）                           

定时器

setInterval(function,timer)  //指定时间调用函数;

clearInterval(定时器name)   //清除定时器;

setTimeout(function,timer)  //延迟指定时间后调用函数;(只执行一次);

clearTimeout(延迟器name)  //清除延迟器

视频/音频

事件

timeupdate //视频/音频播放时间（正在播放时触发）;

ended //播放结束时触发;

属性

currentTime //获取和修改当前播放的时间;

duration //获取音频/视频总共多长时间;

volume //获取和修改音量（0~1）;

方法

play() //开始播放;

pause() //暂停播放;