原生 JS DOM 常用操作大全

DOM文档对象模型 又称为DOM树 DOM树 由文档、元素、节点 组成
    文档：一个页面就是一个文档，元素：文档中的所有标签都称为元素。DOM中使用Element表示节点：文档中的所有内容，在文档中都是节点（标签、属性、文本注释等）DOM中使用node表示

都以 document . 开头 例如：document.getElementById
使用 console.dir 可以打印出返回的元素对象，从而更好的查看属性和方法

获取标签为Id的元素 (文档中的id值是唯一的，没有重复的id)参数：id值，区分大小写的字符串返回id属性值的元素节点相对应的对象

注意：得到的是一个对象数组 ，如需操作元素则需要遍历伪数组 并且伪数组不能使用数组的方法

以标签名来获取元素参数：标签名返回的是一个对象数组 （伪数组）

注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

以class类名获取元素参数 calss类名返回 对应类名的元素对象集合

可以是任意的选择器 例如：id、标签名、类名参数: 可以是 id 、类名、标签 选择器返回：该模式匹配的第一个元素

注意 : 需要在选择器前加符号 例如 .box 、 #nav。让querySelector 知道是什么选择器所以要加符号。 与前面介绍的不同

可以是任意的选择器 例如：id、标签名、类名参数: 可以是 id 、类名、标签 选择器返回：该模式匹配的所有元素对象集合（伪数组 ）

获取body ：document.body获取html : document.documentElement

node.parentNode //node表示节点parentNode //可以返回某个节点的父节点，注意是最近一级的父节点如果指定的节点没有父节点则返回null

parentNode.children (各个浏览器都支持) （不包含 元素节点，文本节点等）parentNode.firstElementChild (获取第一个元素节点) 具有兼容问题 ie9才支持parentNode.lastElementChild (获取最后一个子元素节点) 具有兼容问题 ie9才支持parentNode.children[0] (没有兼容性问题，并且返回第一个子元素)

node.nexElementSibling //返回当前元素下一个兄弟元素节点，找不到则返回nullnode.previousElementSibling // 返回当前元素上一个兄弟节点，找不到则返回null两种方法都有兼容性的问题，IE9以上支持

问：解决兼容性问题
答：自己封装一个兼容性的函数

事件源 （具体作用在哪 个元素或标签上）事件类型 （指的是 例如：鼠标的点击，双击，经过，键盘的按下的键）处理程序 （ 指的是 事件触发后浏览器调用对应的处理程序(以函数的形式），也称为事件处理函数）

使用HTML标签属性注册（例如 Vue的事件注册）使用传统的DOM对象注册 (onclick) 具有唯一性

注意:使用这种方式注册 一个事件源只能注册一个,如注册多个,后面的覆盖前面的注册事件

使用 addEventListener（type,listener,useCapture）的方法监听注册方式 (即可添加多个,也可以取消事件)
    type :事件类型 , 例如：click、mouseover 注意这是里不需要带onlistener:事件处理函数，事件发生时，会调用该监听函数useCapture：可选参数，是一个布尔值，默认是false 。(false为捕获阶段，true为冒泡阶段)

注意:addEventListener() 方法 不支持低版本的IE

div.onclick=null;

div.removeEventListener (type,listener,useCapture);

mousedown->mouseup->click->mousedown->mouseup->click->dbclick
    click 鼠标点击左键并释放时触发dbclick 双击鼠标左键时触发mousedown 按下鼠标按键时触发mouseup 释放鼠标按键时触发mouseover 当鼠标经过时触发 具有事件冒泡 mouseout 当鼠标离开时触发 具有事件冒泡 mouseenter 当鼠标经过时触发 不具有事件冒泡 mouseleave 当鼠标经过时触发 不具有事件冒泡 mousemove 当移动鼠标时触发contextmenu 禁止鼠标右键菜单selectstart 禁止鼠标选中文字

只有在同一个元素上相继触发 mouseover 和 mouseup事件 才会触发 click 事件
只有触发再两次 click 事件,才会触发一次 dbclick 事件

mouseenter与mouseove的区别
    mouseenter经常与mouseleave搭配使用

禁止鼠标右键菜单

禁止鼠标选中文字

焦点事件
    blur 元素失去焦点时触发 不会冒泡 focus 元素获得焦点时触发 不会冒泡 

一般键盘事件使用在 输入框的标签中
    当按下字符键的执行顺序 (按下字符键 触发三次事件)
    keydown > keypress > keyup 其中 keydown 和 keypress 在文件框发生变化之前触发,然后是keyup事件则是在文件框发生变化之后触发当按下非字符键的执行顺序 (按下非字符, 触发二次事件)
    keydown > keyup 其中首先触发 keydown , 最后触发 keyup.

注意：keydown 和 keypress 在文本框里面特点：先执行事件的处理程序 在将文字落入到文本框中, keyup 在文本框里面的特点：先将文字落入到文本框中在执行事件的处理程序

keydown 按下键盘上的任意键触发;按住不放,重复触发keypress按下键盘上的字符键触发;按住不放,重复触发,不识别功能键，如 箭头,ctrl,shift 等keyup释放键盘上的键时触发e.keyCode当用户按下按键时获取按键 ASCII 编码e.key获取当用户按下按键时的名称

在触发DOM上的某个事件时会产生一个事件对象event ，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。事件触发时系统会产生一个事件对象，并且系统会以实参的形式传给事件处理函数在事件处理程序中声明一个形参用来接收事件参数。

e.target返回 触发 事件的对象 标准e.srcElement 返回触发事件的对象 非标准 ie6-8e.type返回事件的类型 比如 click mouseover 不带 one.canceIBubble该属性阻止冒泡 非标准 ie6-8使用e.returnValue 该属性 阻止默认事件（默认行为）非标准 ie6-8使用 比如不让链接跳转e.preventDefault() 该方法阻止默认事件（默认行为）标准 比如不让链接跳转e.stopPropagation() 标准的阻止事件冒泡

this 指向的是事件绑定的元素e.target 指向的是事件触发元素 别忘了e.通常情况下e.target 和 this 的指向是一致的

e.clientX 返回鼠标相对于浏览器窗口可视区的 X 坐标e.clientY 返回鼠标相对于浏览器窗口可视区的 Y 坐标e.pageX 返回鼠标相对于文档页面的 X 坐标 IE9+ 支持e.pageY 返回鼠标相对于文档页面的 Y 坐标 IE9+ 支持e.screenX 返回鼠标相对于电脑屏幕的 X 坐标e.screenY 返回鼠标相对于电脑屏幕的Y 坐标

修改元素内容
    Element.innerText
    只显示纯文本,去除html标签,同时去除了空格和换行Element.innerHTML
    显示指定的元素的全部内容,包括HTML标签,同时保留空格和换行 innerText 与 innerHTML的区别
        使用 innerText 获取内容 不识别 HTML 标签, 空格与换行使用 innerText 设置内容 不识别 HTML 标签使用 innerHTML 获取内容 识别 全部内容包括 HTML 标签 ,会保留空格和换行使用 innerHTML 设置内容 识别 可设置 HTML 标签

普通元素的属性操作
    innerText 、innerHTMLsrc 、hrefid 、alt 、title
表单元素的属性操作
    type 、value 、checked 、selected 、disabled

获取属性的值
    元素对象.属性名
设置属性的值
    元素对象.属性名=值

Element.style.样式 = 值 //行内样式操作 修改行内样式 权重较高 Element.className = "类名" //类名样式操作 覆盖原先的类名
    Element.className=" " //值为空或null 可使元素的类名置空
Element.classList.add ("类名") // 添加类名操作 可添加多个 不会覆盖原有的类名
    Element.classList.remove("移除类名") // 移除类名操作 可移除多个类名Element.classList.toggle("切换类名") //切换类名 无则添加，有则移除Element.calssList.contains("类名") //是否包含此类名， 返回布尔值判断是否为存在

方法一: 在处理程序内的最后 添加 return false ;方法二: 在 a标签中加 javascript:;

Element.属性 （内置属性通 点的方式 获取元素属性）Element.getAttribute("属性") （一般用于 自定义属性）兼容性获取

Element.属性= "值" （内置属性）Element.setAttribute( "属性"，"值" )； //一般用于自定义属性

Element.removeAttribute("属性")

Element.dataset.index 或者 Element.dataset["index"] ie11才支持使用 Element.dataset.属性 获得的是一个以 data- 开头的自定义属性集合

在标签中设置<div data-index="1"> </div>使用 js设置 Element.setAttribute("data-index",2)

document.createElement("标签")
动态创建元素 创建之后需要添加

node.appendchild(child ) //node表示父级 child表示子级
将节点添加到node表示的父节点的子节点列表的末尾，类似数组的方法pushnode.insertBefore( child,指定节点的位置 )
将节点添加到node表示的父节点的指定子节点的前面，类似于css里面的before伪元素

node.cloneNode() //返回调用 该方法的节点的一个副本，也称为克隆节点/拷贝节点如果括号参数为空或者为 false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点

document.write()Element.innerHTML= 值document.createElement()innerHTML数组方式（效率高）

appendChild //在父节点的末尾添加节点insertBefore //可以指定子节点的添加位置

removeChild

主要修改DOM元素的属性，DOM元素的内容，属性，表单的值等。修改元素属性: src、href、title等修改元素的普通内容: innerHMTL、innerText修改表单元素：value、type、disabled等修改元素的模式，style、className

DOM提供的API：getElementById，getElementByTagName 古老用法不太推荐使用H5提供的新方法：querySelector,querySelectorAll 提倡利用节点操作获取元素：父（parentNode)、子(children)、兄弟（previousElementSibling、nextElementSibling) 提倡

setAttribute: 设置自定义属性getAttribute：获取自定义属性removeAttribute：移除属性