目录
一、节点
1.DOM的最小组成单位叫做节点(node),节点类型有七种:Document、DocumentType、Element、Text、Comment、DocumentFragment。其中较常用的为Document、Element、Text
2.节点在在文档中的层级可以抽象为树状结构
注意:属性节点和元素节点属于同一级别的节点
二、Node类型
1.nodeType返回的是节点类型代表的整数值
其中较为重点的节点类型为文档节点,属性节点,文本节点
2.nodeName:返回节点的名称
3.nodeValue:返回当前节点的文本值
4.textContent:返回当前节点和它所有节点的文本内容
实例:为页面创建一个基本的结构
检测Node属性
控制台内容:
注意:直接查找节点nodeValue会返回null,可以通过寻找该节点的孩子节点来读取文本内容;也可以写入节点内容
页面预览:
textContent返回的是当前节点以及其所有后代的所有文本内容
控制台内容
5.nextSibling:返回紧跟当前节点后的第一个同级节点,若无返回null
6.previousSibling:返回紧跟当前节点前的第一个同级节点,若无返回null
7.parentNode:返回当前节点的父节点
8.parentElement:返回当前节点的父元素节点
9.firstChild、lastChild:返回当前节点的第一个子节点和最后一个节点
10.childNodes:返回一个类数组的对象,表示当前节点的所有子节点
实例:
在控制台打印father的下一个节点
控制台内容
注意:此时这里是text而不是div2,是因为next可能会获取到‘空格’或‘回车’ 类型的文本节点
只要使两个div标签中没有空格或回车即可
此时的控制台出现就是div2
previousSibling用法与nextSibling相似
实例二:利用循环及childNodes打印出子节点
控制台内容,包括son以及文本节点
三、Node类型方法
1.appendChild:将一个节点作为父元素的最后一个子节点插入到当前节点
2.insertBefore:将某个节点插入到父节点内部的指定位置
3.removeChild:从当前节点移除该子节点
4.replaceChild:将一个新的节点替换当前节点的某一个子节点
实例一:插入新的节点
页面预览:
实例二: 将p插入到div1的前面
页面预览
实例三、删除子节点p
页面预览:
实例四、替换子节点 将p节点替换div1节点
页面预览
四、Document类型
1.查找元素-->常用
(1)document.getElementById(id):通过元素id来差债元素
(2)document.getElementsByClassName(name):通过类名型来查找元素
(3)document.getElementsByTagName(name):通过标签名来查找元素
注意document.getElementsByClassName 和document.getElementsByTagName 返回的是一个类数组,即包含指定的所有元素
实例一:打印相同类名的第一个类的文本内容
控制台内容
2.添加元素:document.createElement(element);常与appendChild和insertBefore一起使用详情见上面的实例
3.写入:document.write():向文档写入文本或HTML表达式或JS代码
实例:
会解析p标签,将其内容渲染在页面上;页面内容
4.属性:
attributes:返回一个与该元素相关的所有属性的集合。
classList:返回该元素包含的 class 属性的集合。
className:获取或设置指定元素的 class 属性的值。
clientHeight:获取元素内部的高度,包含内边距,但不包括水平滚动条、边框和外边距。
clientTop:返回该元素距离它上边界的高度。
clientLeft:返回该元素距离它左边界的宽度。
clientWidth:返回该元素它内部的宽度,包括内边距,但不包括垂直滚动条、边框和外边距。
innerHTML:设置或获取 HTML 语法表示的元素的后代。
tagName:返回当前元素的标签名。
5.常有方法:
(1)element.innerHTML:改变元素的innerHTML
(2)element.attribute:修改属性的值
(3)element.getAttribute:返回元素节点的指定属性值
(4)element.setAttribute:设置或改变HTML元素的属性值
(5)element.style.property:改变HTML元素的样式
实例一:innerHTML有获取值和设置值的功能
控制台:
实例二:修改标签的id值,且返回其值
控制台
注意方法二的setAttribute中的参数第一个是要改的属性,第二个是把该属性改为什么,如:将id值改为container2
五、Text类型
1.属性:
length:文本长度 appendData(text):追加文本
deleteData(beginIndex,count):删除文本
insertData(beginIndex,text):插入文本
replaceData(beginIndex,count,text):替换文本
splitText(beginIndex):分为两个文本节点
document.creatTextNode(text):创建文本节点,参数为要插入节点中的文本
substringData(beginIndex,count):提取子字符串
实例一
页面预览:
插入文本效果
六、事件机制
DOM允许JS对HTML事件作出反应,JS能够在事件发生时执行
实例一:给div设置原始样式,通过事件机制设置,当鼠标点击时,改变其大小和颜色
页面效果:
当鼠标点击页面时,
1.事件流
(1)事件流是HTML页面接收事件的顺序
(2)事件冒泡:事件冒泡即为目标元素先触发事件,然后事件沿着DOM树一路向上,在经过的每个节点上一次触发,直到到达document对象
实例一:事件冒泡
为页面设置父子结构的div,且为其设置大小和背景颜色
之后为各个事件绑定点击事件
此时页面样式
此时一次点击father、my、son的块级元素,控制台出现:
(3)若想阻止事件冒泡,则需要给对应的点击事件加上参数event;event代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态;然后在点击事件函数体内加上event.stopPropagation()即可
实例二:阻止冒泡事件的发送
此时各自点击father、my、son对于的块级元素
(4)事件捕获:与事件冒泡相反,最外部的节点document先触发事件,然后沿着DOM树往下,在没经过的每个节点都触发事件,直到目标节点
(5)DOM事件流:具有三个阶段-->事件捕获、到达目标、事件冒泡
其中1-2-3为捕获阶段;3-4为到达阶段;4-5-6为冒泡阶段
七、事件处理程序
1.DOM0事件处理程序
(1)DOM0事件处理程序是将一个函数赋值给一个事件处理程序属性,例如上方的实例均可属于DOM0事件处理程序
(2)移除通过DOM0方式添加的事件处理程序
btn.onclick = null;
将事件处理程序设置为null,再点击按钮就不会执行任何操作了
2.DOM2事件处理程序
(1)DOM2事件处理程序将addEventListener()和removeEventListener()方法接口暴露在所有DOM节点上
(2)使用addEventListener()为按钮添加点击事件
实例一:为页面添加按钮,利用DOM2事件处理程序,使当点击按钮时,打印“点击”
addEventListener的第一个参数是事件属性;第二个参数是事件处理程序,即当btn被点击时,处理第二个参数定义的函数
removeEventListener是移除用addEventListener绑定的点击事件,所有其两个参数都要和addEventListener的参数一模一样;这意味着使用addEventListener添加的匿名函数无法被移除,因为addEventListener和removeEventListener两者的匿名函数被认为是两个函数体一样的匿名函数
解决方法:将函数定义在其外部
此时再次点击按钮就无法在控制台输出“点击”
3.阻止默认事件的发送preventDefault
(1)与阻止事件冒泡的方法一样,使用参数event;
(2)默认事件:如链接的默认事件就是被点击时跳转
此时点击百度便无法跳转到对应的页面
八、事件委托
1.事件委托是当子元素的事件处理程序都是类似时,可将要做的事情委托给父元素,可避免过多的给子元素添加相同的事件,减少内存浪费
实例一:当点击页面中的文字时,改变文字内容
其中event.target是可以拿到各自 li 中的整个内容,所以event.target.id即可拿到 li 的 id 值
页面预览,初始时
当点击文字时
2.事件类型
(1)当页面加载完成后触发:onload;当页面完全卸载后触发:onunload
(2)在文本框上选择一个或多个字符是触发:onselect
(3)在窗口被缩放时触发:onresize
(4)当滚动时触发:onscroll,注意:此时页面必须包括滚动条
3.焦点事件:
(1)元素失焦时触发:onblur;元素获得焦点是触发:onfocus;注意:两者均不冒泡
(2)冒泡版的元素聚焦失焦:onfocusin->聚焦;onfocusout->失焦
4.鼠标事件:
(1)鼠标点击时触发:onclick;鼠标双击时触发:ondbclick;按下鼠标任意键触发:onmousedown
(2)鼠标光标移入时触发:onmouseenter;鼠标光标移出时触发:onmouseleave
(3)鼠标在元素上移动时反复触发:onmousemove
(4)鼠标光标从一个元素移到另一个元素上时触发:onmouseout
(5)鼠标释放时触发:onmouseup
(6)鼠标滚轮触发事件:onmousewheel
5.键盘事件:
(1)onkeydown:按下键盘上的某个键时触发;
onkeypress:按下键盘某个键且产生字符时触发
onkeyup:释放键盘上某个键时触发
(2)键盘上的每个键都有对应的键码
实例一:当键盘按下enter键时,触发事件,在js中有keyCode可以来接收键盘传入的键码
页面生成一个文本框,输入文字,当按下enter键时,控制台输出内容
6.event:
event可以将其理解为浏览器的感知系统,如可以感受用户是否点击了页面,鼠标是否进入元素,键盘是否按下或释放