原生 JS DOM 常用操作大全

DOM

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

获取元素

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

getElementById （元素ID)

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

2019-9-9

getElementsByTagName (标签名)

注意：得到的是一个对象数组 ，如需操作元素则需要遍历伪数组 并且伪数组不能使用数组的方法以标签名来获取元素参数：标签名返回的是一个对象数组 （伪数组）

• 生僻字
• 生僻字
• 生僻字
• 生僻字
• 生僻字

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

getElementsByCalssName (class类名)

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

盒子1

盒子2

• 首页
• 产品

querySelector （选择器 ）

可以是任意的选择器 例如：id、标签名、类名参数: 可以是 id 、类名、标签 选择器返回：该模式匹配的第一个元素注意 : 需要在选择器前加符号 例如 .box 、 #nav。让querySelector 知道是什么选择器所以要加符号。 与前面介绍的不同

盒子1

盒子2

• 首页
• 产品

querySelectorAll （选择器）

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

盒子1

盒子2

• 首页
• 产品

获取特殊元素（body、html)

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

获取元素之 节点获取

页面中所有的内容都为节点，节点使用 node 来表示
DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

父级节点

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

×

子元素节点

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

• 我是li
• 我是li
• 我是li
• 我是li

兄弟节点

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

我是div

我是span

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

function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}

事件处理
javaScript 程序中采用的是异步处理事件模型，事件处理分三部分。

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

事件处理

注册事件
注册事件有三种方法

使用HTML标签属性注册（例如 Vue的事件注册）使用传统的DOM对象注册 (onclick) 具有唯一性注意:使用这种方式注册 一个事件源只能注册一个,如注册多个,后面的覆盖前面的注册事件使用 addEventListener（type,listener,useCapture）的方法监听注册方式 (即可添加多个,也可以取消事件)type :事件类型 , 例如：click、mouseover 注意这是里不需要带onlistener:事件处理函数，事件发生时，会调用该监听函数useCapture：可选参数，是一个布尔值，默认是false 。(false为捕获阶段，true为冒泡阶段)注意:addEventListener() 方法 不支持低版本的IE

注册事件的三种方法

删除事件（解绑事件）
移除传统的注册方式（DOM 对象的方法）

div.onclick=null;

移除监听事件的方式 （使用匿名函数 ，无法移除 ）

div.removeEventListener (type,listener,useCapture);

1

2

3

鼠标事件
鼠标事件的执行顺序

mousedown->mouseup->click->mousedown->mouseup->click->dbclickclick 鼠标点击左键并释放时触发dbclick 双击鼠标左键时触发mousedown 按下鼠标按键时触发mouseup 释放鼠标按键时触发mouseover 当鼠标经过时触发 具有事件冒泡 mouseout 当鼠标离开时触发 具有事件冒泡 mouseenter 当鼠标经过时触发 不具有事件冒泡 mouseleave 当鼠标经过时触发 不具有事件冒泡 mousemove 当移动鼠标时触发contextmenu 禁止鼠标右键菜单selectstart 禁止鼠标选中文字只有在同一个元素上相继触发 mouseover 和 mouseup事件 才会触发 click 事件
只有触发再两次 click 事件,才会触发一次 dbclick 事件mouseenter与mouseove的区别mouseenter经常与mouseleave搭配使用

//1.mouseenter 鼠标经过 不具有事件冒泡，不会传递给son点击事件

禁止鼠标右键菜单

//1.contextmenu 禁止鼠标右键菜单

documnet.addEventListener(“contextmenu”,function(e){

e.preventDefault(); // 阻止事件的默认跳转行为

})

禁止鼠标选中文字

//2.selectstart 禁止鼠标选中文字

documnet.addEventListener(“selectstart”,function(e){

e.preventDefault(); //阻止事件的默认跳转行为

})

焦点事件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获取当用户按下按键时的名称

滚动条事件
当出现滚动条时，向下滚动页面时，上面被隐藏掉的高度，被称为页面被卷去的部分，此时滚动条在滚动时会触发 scroll事件
element.addEventListener(“scroll”,()=>{ console.log(element.scrollTop) })
表单事件
change事件 当表单的值 发生改变时触发
事件对象

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

//1. 方法一
eventTarget.onclick = function (event) {
//这个event就是事件对象，我们还喜欢的写成 e 或者 evt
}
// 2. 方法二
eventTarget.addEventListener(“click”, function (event) {
//这个event就是事件对象，我们还喜欢的写成 e 或者 evt/这个
})
//3.方法三
eventTarget.addEventListener(“click”, fn)
function (event) {
//这个event就是事件对象，我们喜欢写成e或者evt
}

事件对象的属性和方法

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

事件对象的 this 与 e.target 的区别

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

注意：有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）这时候 this 指向的是元素，因为 this 使终指向的是事件绑定的元素 target 指向的是子元素 ，因为target使终指向的是事件触发的元素

123

• abc
• abc
• abc

鼠标的事件对象

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 标签

属性的操作

this 指向的是事件函数的调用者

普通元素的属性操作innerText 、innerHTMLsrc 、hrefid 、alt 、title
表单元素的属性操作type 、value 、checked 、selected 、disabled获取属性的值元素对象.属性名
设置属性的值元素对象.属性名=值

按钮

样式属性操作
通过 js 修改元素大小,颜色,位置等模式

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

calssName 是保留字,因此使用 calssName 来操作元素类名属性

取消 a 标签的默认跳转

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

自定义属性操作
为什么需要自定义属性：用于在页面中存储数据而不用在数据库中存储

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

设置属性值

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

移除属性值

Element.removeAttribute("属性")

只能获取以 data开头 的自定义属性

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

设置H5 自定义属性
H5中规定 自定义属性要 以 data-开头做为属性名并且赋值。

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

节点操作
node 表示父级 child 表示子级

创建节点

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

添加节点

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

删除节点
node.removeChild( child ) 方法 在父级节点删除一个子节点，返回删除的节点

复制（克隆）节点

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

DOM的核心总结
DOM操作，我们主要针对于元素的操作。主要有创建，添加，删除，改，查。

创建元素的三种方式

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：移除属性