parentnode js 收藏 0

JavaScript进阶班之DOM技术总结

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口，W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

• 文档：一个页面就是一个文档，DOM中使用doucument来表示
• 元素：页面中的所有标签都是元素，DOM中使用 element 表示
• 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

DOM 把以上内容都看做是对象

DOM在我们实际开发中主要用来操作元素。

我们如何来获取页面中的元素呢?

获取页面中的元素可以使用以下几种方式:

• 根据 ID 获取
• 根据标签名获取
• 通过 HTML5 新增的方法获取
• 特殊元素获取

使用 getElementByld() 方法可以获取带ID的元素对象

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

示例

根据标签名获取，使用 getElementByTagName() 方法可以返回带有指定标签名的对象的集合

• 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
• 得到元素对象是动态的
• 返回的是获取过来元素对象的集合，以伪数组的形式存储
• 如果获取不到元素，则返回为空的伪数组(因为获取不到对象)

还可以根据标签名获取某个元素（父元素）内部所有指定标签名的子元素,获取的时候不包括父元素自己

注意：父元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元素自己

根据类名返回元素对象合集

• document.getElementsByClassName(\’类名\’)

根据指定选择器返回第一个元素对象

根据指定选择器返回所有元素对象

注意：

querySelector 和 querySelectorAll 里面的选择器需要加符号,比如: document.querySelector(\’#nav\’);

返回body元素对象

返回html元素对象

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发— 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

1. 事件源(谁)
2. 事件类型(什么事件)
3. 事件处理程序(做啥)

1. 获取事件源
2. 注册事件(绑定事件)
3. 添加事件处理程序(采取函数赋值形式)

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。

起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

• 行内样式操作

• 类名样式操作

注意：

1. JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor
2. JS 修改 style 样式操作 ，产生的是行内样式，CSS权重比较高
3. 如果样式修改较多，可以采取操作类名方式更改元素样式
4. class 因为是个保留字，因此使用className来操作元素类名属性
5. className 会直接更改元素的类名，会覆盖原先的类名

如果有同一组元素，我们相要某一个元素实现某种样式，需要用到循环的排他思想算法：

1. 所有元素全部清除样式（干掉其他人）
2. 给当前元素设置样式 （留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

• 获取内置属性值(元素本身自带的属性)

• 获取自定义的属性

• 设置内置属性值

• 主要设置自定义的属性

自定义属性目的：

• 保存并保存数据，有些数据可以保存到页面中而不用保存到数据库中
• 有些自定义属性很容易引起歧义，不容易判断到底是内置属性还是自定义的，所以H5有了规定

H5规定自定义属性 data-开头作为属性名并赋值

• 兼容性获取 element.getAttribute(\’data-index\’)
• H5新增的：element.dataset.index 或element.dataset[\’index\’] IE11才开始支持

获取元素通常使用两种方式：

这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单

一般的，节点至少拥有三个基本属性

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

一般的，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

• 元素节点：nodeType 为1
• 属性节点：nodeType 为2
• 文本节点：nodeType 为3(文本节点包括文字、空格、换行等)

我们在实际开发中，节点操作主要操作的是元素节点

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

• parentNode属性可以返回某节点的父结点，注意是最近的一个父结点
• 如果指定的节点没有父结点则返回null

• parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合
• 返回值包含了所有的子结点，包括元素节点，文本节点等
• 如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

• parentNode.children 是一个只读属性，返回所有的子元素节点
• 它只返回子元素节点，其余节点不返回 （这个是我们重点掌握的）
• 虽然 children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

• firstChild 返回第一个子节点，找不到则返回null
• 同样，也是包含所有的节点

• lastChild 返回最后一个子节点，找不到则返回null
• 同样，也是包含所有的节点

• firstElementChild 返回第一个子节点，找不到则返回null
• 有兼容性问题，IE9以上才支持

• lastElementChild 返回最后一个子节点，找不到则返回null
• 有兼容性问题，IE9以上才支持

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案

• 如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
• 如果想要最后一个子元素节点，可以使用

• 示例：

• nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null
• 同样，也是包含所有的节点

• previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null
• 同样，也是包含所有的节点

• nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null
• 有兼容性问题，IE9才支持

• previousElementSibling 返回当前元素上一个兄弟元素节点，找不到则返回null
• 有兼容性问题，IE9才支持

示例

如何解决兼容性问题 ？

答：自己封装一个兼容性的函数

• document.createElement() 方法创建由 tagName 指定的HTML 元素
• 因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

• node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。

• node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

示例

• node.removeChild()方法从 DOM 中删除一个子节点，返回删除的节点

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

示例

三种动态创建元素的区别

• doucument.write()
• element.innerHTML
• document.createElement()

区别：

• document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
• innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
• innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

• createElement()创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下， innerHTML 效率要比 createElement 高

对于DOM操作，我们主要针对子元素的操作，主要有

• 创建
• 增
• 删
• 改
• 查
• 属性操作
• 时间操作

1. document.write
2. innerHTML
3. createElement

1. appendChild
2. insertBefore

1. removeChild

• 主要修改dom的元素属性，dom元素的内容、属性、表单的值等

1. 修改元素属性：src、href、title 等
2. 修改普通元素内容：innerHTML、innerText
3. 修改表单元素：value、type、disabled
4. 修改元素样式：style、className

• 主要获取查询dom的元素

1. DOM提供的API方法：getElementById、getElementsByTagName (古老用法，不推荐)
2. H5提供的新方法：querySelector、querySelectorAll (提倡)
3. 利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

• 主要针对于自定义属性

1. setAttribute：设置dom的属性值
2. getAttribute：得到dom的属性值
3. removeAttribute：移除属性

给元素添加事件，称为注册事件或者绑定事件。

注册事件有两种方式：传统方式和方法监听注册方式

• eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上
• 当该对象触发指定的事件时，就会执行事件处理函数

该方法接收三个参数：

• type:事件类型字符串，比如click,mouseover,注意这里不要带on
• listener：事件处理函数，事件发生时，会调用该监听函数
• useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

• eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上
• 当该对象触发指定的事件时，指定的回调函数就会被执行

该方法接收两个参数：

• eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
• callback： 事件处理函数，当目标触发事件时回调函数被调用
• ie9以前的版本支持

兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器

该方法接收三个参数：

• type:事件类型字符串，比如click,mouseover,注意这里不要带on
• listener：事件处理函数，事件发生时，会调用该监听函数
• useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

该方法接收两个参数：

• eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
• callback： 事件处理函数，当目标触发事件时回调函数被调用
• ie9以前的版本支持

事件删除示例：

• 事件流描述的是从页面中接收事件的顺序
• 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

• 事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。
• 事件捕获： 网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

加深理解：

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

• document -> html -> body -> father -> son

两个盒子嵌套，一个父盒子一个子盒子，我们的需求是当点击父盒子时弹出 father ，当点击子盒子时弹出 son

但是因为DOM流的影响，我们点击子盒子，会先弹出 father，之后再弹出 son

这是因为捕获阶段由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收

• document -> html -> body -> father -> son
• 先看 document 的事件，没有；再看 html 的事件，没有；再看 body 的事件，没有；再看 father 的事件，有就先执行；再看 son 的事件，再执行。

• son -> father ->body -> html -> document

我们点击子盒子，会弹出 son、father、document

这是因为冒泡阶段开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点

• son -> father ->body -> html -> document

• JS 代码中只能执行捕获或者冒泡其中的一个阶段
• onclick 和 attachEvent只能得到冒泡阶段
• addEventListener(type,listener[,useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false (不写默认就是false),表示在事件冒泡阶段调用事件处理程序
• 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
• 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

• 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

简单理解：

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面

这个对象就是事件对象 event，它有很多属性和方法，比如“

谁绑定了这个事件

鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置

键盘触发事件的话，会得到键盘的相关信息，如按了哪个键

• 这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去
• 当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

事件对象本身的获取存在兼容问题：

1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找

解决：

e.target 和 this 的区别：

• this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）
• e.target 是事件触发的元素。

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

• 标准写法

• 非标准写法： IE6-8 利用对象事件 cancelBubble属性

e.target 与 this 的区别

• this是事件绑定的元素，这个函数的调用者(绑定这个事件的元素)
• e.target是事件触发的元素

事件对象本身的获取存在兼容问题：

• 标准浏览器中浏览器是给方法传递的参数，只需定义形参e就可以获取到
• 在 IE6 -> 8 中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找

解决方案

• e = e || window.event

• 事件委托也称为事件代理，在 jQuery 里面称为事件委派
• 事件委托的原理

• 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。

• contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
• selectstart 禁止鼠标选中

• event对象代表事件的状态，跟事件相关的一系列信息的集合
• 现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。

示例：

• 如果使用addEventListener 不需要加 on
• onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等
• 三个事件的执行顺序是： keydown – keypress — keyup

• onkeydown和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
• 在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）
• Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

金山办公WPS等APP因菜单栏使用“父主题”而被冲爆

WPS因为“父主题”被骂上热搜，到底是哪里出了问题？

近日，微博、豆瓣和小红书等社交媒体上的网友正在发起了一场对APP“话术表述”的争论。

起因是一名小红书用户，发现WPS软件里有个 “新增父主题” 的选项，她提出疑问：“印象里难道不是一直都是母主题吗，看得的人心理不适。”

事情发酵后大量用户在WPS应用商店给予差评，“祝贵司收益父父父，股票爹爹爹”。

还有人在WPS微博账号评论区表达不满，“改回母主题否则一条条冲”“不会再用wps了，一分钱都不会再充”。

很快网友发现包括WPS、Xmind、MindMaster等思维导图的APP都存在这个问题，不止办公软件，连京东、微信、沃尔玛、豆包、知乎等常用软件也采用这种叫法。

有用户问询京东何不以“原始订单”称呼拆分订单，客服称会记录修改成更明晰的信息。

中国知网也被曝账号管理采用绑定“父账号”的描述，被大量网友举报后修改为“机构账号”。

涉及这么多不同行业的APP都采用“父主题”等表述，如果说有公司恶意篡改看来并不现实，也有网友指出WPS在2020年就发过一个软件介绍视频，那时候就用“父主题” 描述，根本不存在 “近期偷摸改字” 的情况。

实际上用父子概念来形容层级关系在计算机领域十分普遍。父节点的英文是parentNode，子节点是childNode ，英文表述并没有指出具体的性别，也有教材会把parentNode翻译成双亲节点。

而百科对树结构（Tree structure）的定义，最早就是使用的“父与子”指代节点关系，后来才采用中性的“父母”和“孩子”在取代原表达。术语“uncle”仍然广泛用于与父级处于同一级别的其他节点，有时也会被诸如“ommer”之类的中性术语取代。

截至12月27日12点，大部分APP客服人员表示对父主题名称感到冒犯，会收集建议并反馈，但未有公司官方回应“父母”表述上引发的争议。

一文解读JavaScript中的文档对象（DOM）

作者： IT共享者来源：IT共享之家

相信做网站对JavaScript再熟悉不过了，它是一门脚本语言，不同于Python的是，它是一门浏览器脚本语言，而Python则是服务器脚本语言，我们不光要会Python，还要会JavaScript，因为它对做网页方面是有很大作用的。

这是我们用的最普遍的一个文档对象了，专门用来操作DOM节点时用。

1)).获取元素

2)).获取网页内容

3)).文档写入

4)).获取集合

5)).获取节点

这里我们获取到了所有的Div元素，我们可以针对性的获取一个ID下的Div的子元素以及它的兄弟和父，子元素，如下：

6)).创建节点

我们可以自定义节点并添加值，不过要将它添加到文档中去，所以必须添加节点，一般和下方的增加节点配套使用。

7)).增加节点

8)).删除节点

9)).替换节点

10)).复制节点

11)).节点属性

12)).获取元素文本

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com