-DOM-

目录

一、节点

二、Node类型

三、Node类型方法

四、Document类型

五、Text类型

六、事件机制

七、事件处理程序

八、事件委托

---

一、节点

        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可以将其理解为浏览器的感知系统，如可以感受用户是否点击了页面，鼠标是否进入元素，键盘是否按下或释放