常见的DOM操作⽅式有哪些
html document是什么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.查节点
ElementsByClassName('class属性值')；返回拥有指定class的对象集合
ElementsByTagName('标签名')；返回拥有指定标签名的对象集合
document/element.querySelector('CSS选择器')；仅返回第⼀个匹配的元素
document/element.querySelectorAll('CSS选择器')；返回所有匹配的元素
document.documentElement；获取页⾯中的HTML标签
document.body；获取页⾯中的BODY标签
document.all['']；获取页⾯中的所有元素节点的对象集合型
2.创建节点
3.删除节点
4.修改节点
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 ：获取已知节点的相邻的上⼀个节点
(3)可以复制节点么？
cloneNode(true | false)；复制某个节点
参数：是否复制原节点的所有属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。