Web前端的知识之旅哟——DOM!

到上一篇文章结束我感觉ECMAScript的部分应该差不多了，所以接下来开始总结DOM的知识点了哟~

什么是DOM

什么叫做DOM呢？

• DOM的全称是Document Object Model 文档对象模型，DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

• DOM对象即为宿主对象，由浏览器厂商定义，用来操作html的css功能的一类对象和集合。不过浏览器厂商之间大部分都遵循w3c标准。

• 简单来说，DOM就是用来操作html和css的，它是一系列对象的集合。

DOM如何操作HTML

document代表整个文档，它也是一个dom元素，我们dom对html的操作，即使对html的增删改查。下面我就介绍一下dom都是如何增删改查html的。

那么我们如何查看元素节点？

我们知道css中有id、class、标签等选择器，同样，我们的document对象上也定义了很多类似的方法来查看元素节点。

• getElementById

document.getElementById(‘id’);方法是通过元素的id来选择出相对应的元素的，因为id是唯一标示，所以方法名中是Element。

值得注意的是，在ie8以下的浏览器中，不区分大小写，而且标签的name属性也可以被当做id被选择出来。

var div = document.getElementById(‘demo’);

这里同样把这个div选择出来了。

• getElementsByClassName

document.getElementsByClassName(‘class’); 获取到的是一个类数组，因为很多元素都可以有一个类名。我们可以通过[]的方式来选择到具体的哪一个元素。

var div = document.getElementsByClassName(‘div’)[1];

这样我们就可以选择到第二个div了。

不过如果我们碰到这种情况该怎么办？

我们改如何选择出来第二个div？

这里，我们的getElementsByClassName其实后面可以填写多个类名。

var div = document.getElementsByClassName(‘demo demo1’)[0];

这样，我们就可以选择出来第二个div了。

但是值得注意的是，ie8及以下的版本中没有这种方法。

• getElementsByTagName

document.getElementsByTagName(‘div’);这个方法是可以选择出来具体某一种元素的集合，像前面这一段就可以选择出全部的div集合，当然也是一个类数组。

这个方法所有版本的浏览器都兼容。

• getElementsByName

document.getElementsByName();需要注意的是，只有部分标签的name可以生效，比如表单、表单元素、img、iframe等。

document.getElementsByName(‘123’)[0];

同样是选择出来一组，不过这个方法不是很常用。

• 这里面我们我们最常用的是id和tag，因为全版本都支持。

• querySelector()

• querySelectorAll()

这两个方法通常放在一起说。

我们知道选择元素最强的是css，而这两个里面写的参数就是我们css选择器的写法。

document.querySelector(‘div p #demo .demo);

不过querySelector永远选择一组里面的第一个，所以返回的不是一个类数组而是一个具体的元素。

而我们如果要返回一个类数组的集合的话，那么就用第二个querySelectorAll()方法。

不过这两个方法的问题在于，他们返回的不像前面四个是一个实时改变的元素，而是一个副本。当我们用这两个方法选择出来元素之后，我们把本身那个元素修改一下，会发现我们选择出来的那个元素没有变化。

var div = document.querySelectorAll(‘.content’);

var div1 = document.getElementsByClassName(‘content’)[0];

console.log(div);

div1.remove();

console.log(div);

我们发现两次打印出来的都是[div.content, div.content, div.content]，也就是说我们实际删除的那个元素对用querySelector选择出来的那个副本没有影响。

不过，在ie7及以下的版本没有这两个方法。

我们以后提到的jQuery里面的选择器，虽然是基于Sizzle的，但是Sizzle是基于querySelector写的。

节点

节点类型

我们页面里面的节点类型很多，比如元素节点、文本节点、注释节点、属性节点等等。

我们可以通过nodeType属性来查看这个节点的类型是什么。而nodeType返回的是一些数字，下面介绍几个基础的类型和数字的对应关系：

元素节点——1

属性节点——2

文本节点——3

注释节点——8

document——9

DocumentFragment——11

节点的其他属性

• nodeName

这个属性可以返回元素的标签名，以大写的形式表示，只读，不允许写入。

有几个特殊的节点返回的也不太一样：

文本节点–> #text

注释节点–> #comment

document节点–>#document

• nodeValue

Text节点或者Comment节点的文本内容，可以读写

• attributes

把元素的行间属性都读取出来，放到一个对象里面返回，对象里面的每一个属性都是一个节点，这个节点就是我们前面提到的属性节点。

注意：对象里面的属性叫做property，而元素里面的属性叫attributes，实际应该叫特性。

节点还有一个方法

hasChildNodes()可以检测是否有子节点

遍历节点树

• parentNode 查找父节点

<div>

</div>

这里strong的父节点就是p，p的父节点是div，div的父节点是body，body的父节点是html，html的父节点是document，document的父节点是null，在后面就没有了。

• childNodes 子节点们

div.childNodes 没有说明类型，那么就是说这个方法是把所有的子节点都返回。

<div>

</div>

还是这个例子，我们div里面的childNodes其实有3个，第一个是前面的空格——文本节点，第二个是中间的p标签——元素节点，第三个是最后的空格——文本节点。

• firstChild 第一个子节点

• lastChild 最后一个子节点

• nextSibling 下一个兄弟节点

• previousSibling 上一个兄弟节点

以上这些方法的兼容性都很好，所有的浏览器都支持，但是下面这些就不行了。

基于元素节点树的遍历

• parentElement 返回当前元素的父元素节点

在这个方法上面，html上面的父元素节点就不是document而是null了。

但是ie不支持这个方法。

• children 所有子元素节点

这个方法所有的浏览器都兼容。

• childElementCount

node.children.length === node.childElementCount

这个属性就是子元素节点的数量，不过我更常用前面的那个。

• nextElementSibling

• previousElementSibling

这两个方法分别是找上一个和下一个兄弟元素节点，但是ie都不兼容。

DOM结构树

dom

这个图表中说明了每一个对象的父级。

浏览器除了可以处理html页面外，还可以处理xml和xhtml等页面。

我们发现HTMLDocument继承自HTMLDocument.prototype，我们在原型上定义一个属性来测试一下。

HTMLDocument.prototype.abc = 123;

document.abc; // 123

document.getElementById(‘demo’).abc; // 报错

由此可见，HTMLDocument确实继承HTMLDocument对象的属性，但是相对的Element上面并没有这个方法。

这里的Node上面也还是有父级的，我们可以通过Node.prototype来查看，这里就不举例了。

下面是一些DOM结构树的总结：

1.getId方法定义在Document.prototype上，即Element节点上不能使用。

2.getElementByName方法定义在HTMLDocument.prototype上，非html中的document不能使用(xml document、Element);

3.getElementsByTagName方法定义在Document.prototype和Element.prototype上，也就是document和元素都可以用这个方法。

4.HTMLDocument.prototype上定义了一些常用的属性，body、head分别代指HTML文档中的<body><head>标签。

5.Document.prototype上定义了documentElement属性，指代文档的根元素，在html文档中，它总代指<html>元素。

6.getElementByClassName、querySelectorAll、querySelector在Document、Element类中均有定义。

今天的DOM知识就到这里结束了哟~