常见的DOM操作方式有哪些

1.背景介绍
什么是DOM？

DOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。那么为什么DOM可以同时提供给HTML和XML编程接口。虽然他们用来标记的标签不同，但是他们本质的结构是相同的。换句话说，按照DOM的标准，HTML和XML都是以标签为结点构造的树结构，DOM将HTML和XML的相同的结构本质抽象出来，然后通过脚本语言，如Javascript，按照DOM里的模型标准访问和操作文档内容。

在Chrome浏览器端，单击右键打开View Page Source展示文档结构。通过这种方式可以直观的看到文档当前的内容和结构。DOM则不同，它是提供一个API给编程语言，比如Javascript，通过一系列抽象的方法操作文档的内容，结构和样式。

官方介绍结束，现在用人话来理解：

在现实世界里，我们对所谓的’世界对象模型’都不会陌生，例如，当用’汽车’、'房子’和’树’等名词来称呼日常生活环境里的事物时，我们都可以百分百的肯定对方知道我们说的是什么，这是因为人们在对这些名词所代表的的东西有着相同的认知。于是，当对别人说"汽车停在车库里"时，可以断定他们不会理解为"小鸟关在壁橱里"等别的含义。

我们的"世界对象模型"不进可以用来描述客观存在的事物，还可以同来描述抽象概念。

例如，假设有个人想我问路，而我给出的答案是"左边第三栋房子"，这个答案有没有意义取决于那个人能够理解"左边"和"第三"的含义。如果他不会数数或者分不清左右，则不管他是否理解这几个概念，我的回答对他都不会有任何的帮助。在现实世界中，正是因为大家对抽象的"世界对象模型"有着基本的共识，人们才能用非常简单的话来表达出复杂的含义并得到对方的理解。

2.知识剖析
刚刚提到了节点。那么节点这个到底又是什么？

节点这个词是一个网络用语，代表了网络中的一个连接点。一个网络就是由一些节点构成的集合。

在现实世界中，一切事物都由原子构成。原子就是现实世界的节点。但是原子同样还可以进一步分解为更细小的亚原子微粒。这些亚原子微粒同样也是节点。

DOM也是同样的情况。文档是由节点构成的集合，只不过此时的节点是文档树上的树枝和树叶而已。

在DOM中有许多不同类型的节点。就像原子包含着亚原子微粒那样，也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种：元素节点、文本节点和属性节点。

那么，DOM是由什么组成？

对于XML应用开发来说，DOM就是一个对象化的XML数据接口，一个与语言无关、与平台无关的标准接口规范。

DOM定义了HTML文档和XML文档的逻辑结构，给出了一种访问和处理这两种文档的方法。文档代表的是数据，而DOM则代表了如何去处理这些数据。

作为W3C的标准接口规范，目前，DOM由三部分组成，包括：核心（core）、HTML接口和XML接口。（至于XML和HTML区别是啥，你可以理解为两种不同的语言，但是很相似。作用不一样。XML更多用于数据传输设计，HTML更多用于数据的展示模块）

核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据了。

HTML接口和XML接口两部分则是专为操作具体HTML文档和XML文档所提供的高级接口。

DOM树（丑图，摘自红宝书）

2.知识剖析
DOM的四个基本接口

在DOM接口规范中，有四个基本的接口：Document, Node, NodeList, NamedNodeMap。

Document:Document接口是对文档进行操作的入口，它是从Node接口继承过来的。

Node:Node接口是其他大多数接口的父类。在DOM树中，Node接口代表了树中的一个节点。

常见的DOM操作

1.查找节点

document.getElementById('id属性值'); 返回拥有指定id的第一个对象的引用document/element.getElementsByClassName('class属性值'); 返回拥有指定class的对象集合document/element.getElementsByTagName('标签名'); 返回拥有指定标签名的对象集合document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合document/element.querySelector('CSS选择器'); 仅返回第一个匹配的元素document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素document.documentElement; 获取页面中的HTML标签document.body; 获取页面中的BODY标签document.all['']; 获取页面中的所有元素节点的对象集合型

2.创建节点

document.createElement('元素名'); 创建新的元素节点document.createAttribute('属性名'); 创建新的属性节点document.createTextNode('文本内容'); 创建新的文本节点document.createComment('注释节点'); 创建新的注释节点document.createDocumentFragment( ); 创建文档片段节点

3.删除节点

parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点element.removeAttribute('属性名');删除具有指定属性名称的属性，无返回值element.removeAttributeNode( attrNode );删除指定属性，返回值为删除的属性

4.修改节点

parentNode.replaceChild( newChild, existingChild );用新节点替换父节点中已有的子节点element.setAttributeNode( attributeName );若原元素已有该节点，此操作能达到修改该属性值的目的element.setAttribute( attributeName, attributeValue );若原元素已有该节点，此操作能达到修改该属性值的目的

5.插入节点

parent.appendChild( element/txt/comment/fragment );向父节点的最后一个子节点后追加新节点parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点element.setAttributeNode( attributeName );给元素增加属性节点element.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值

6.设置样式

ele.style.styleName = styleValue;设置ele元素的CSS样式

7.更多讨论

(1)鼠标事件有哪些？

1、onclick 事件——当用户点击时

2、onload 事件——用户进入

3、onunload 事件——用户离开，如刷新页面，提交表单，关闭窗口，关闭浏览器时触发（这个事件在Chrome和Opera浏览器里并不支持）

4、onmouseover事件——鼠标移入

5、onmouseout事件——鼠标移出

6、onmousedown事件——鼠标按下

7、onmouseup 事件——鼠标抬起

(2)如何获取相邻的节点？

neborNode.previousSibling :获取已知节点的相邻的上一个节点

nerbourNode.nextSlbling: 获取已知节点的下一个节点

(3)可以复制节点么？

cloneNode(true | false);复制某个节点

参数：是否复制原节点的所有属性

常见的DOM操作方式有哪些相关推荐

常见的DOM操作有哪些
这里是修真院前端小课堂,本篇分析的主题是 [常见的DOM操作有哪些] 这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文 ...
javascript中五种常见的DOM方法
getElementById将返回一个与那个有着给定id属性值的元素节点对应的对象. <html xmlns="http://www.w3.org/1999/xhtml"&g ...
【React组件】写一个模仿蓝湖的图片查看器
前言最近公司让写一个可以自由拖拽放大的图片查看器,我寻思这还不简单,一顿操作猛如虎,俩小时后: 事实证明,一旦涉及到 DOM 的变换操作,如果很多细节考虑不全,抓过来就写,那基本就凉了.于是我仔细分 ...
【前端学习笔记DOM—DOM常见操作】
目录前言一.什么是DOM 二.常见的DOM操作 1.增 (1)新建 (2)插入 2.删 (1)删除子节点 (2)删除属性节点 3. 改 (1)替换节点 (2)修改属性值 4. 查 (1)通过id属 ...
常见Dom操作有哪些？
这里是修真院前端小课堂,本篇分析的主题是 [ 常见Dom操作有哪些?] 大家好,我是IT修真院深圳分院第02期学员,一枚正直善良的web程序员. 今天给大家分享一下,修真院官网JS任务2中常见DOM操 ...
JavaScript中BOM及DOM的学习
JavaScript中BOM及DOM的学习文章目录 JavaScript中BOM及DOM的学习 1 BOM编程 1.1 BOM编程概述 1.1.1 BOM编程的概念 1.1.2 BOM编程的作用 1 ...
从各大跨平台技术说开去，我们真的需要虚拟 DOM 吗？
前言你有没有留意到?优秀的解决方案思想都是相通的:当你研究 Flutter 渲染原理时会发现 Flutter Rendering 层类似于 React 中的虚拟 DOM,当你去看 Weex 工作原理 ...
javaScript的使用（5）DOM事件
dom事件浏览器监听特定的条件或用户行为,并且触发相应的操作(函数) 常见的dom事件如下: onclick:单击事件 onfocus:焦点事件 onblur:失去焦点事件 onkeydown:键盘 ...
javascript --- [虚拟DOM] 初始化实现
说明本篇主要说明为什么要使用虚拟DOM技术,以及如何实现简单的虚拟dom 您将会学到: 1.原生JS对DOM的操作 2.虚拟DOM的相关概念 3.DIFF算法的基础概念为什么提出 -> DO ...

常见的DOM操作方式有哪些

常见的DOM操作方式有哪些相关推荐

最新文章

热门文章