DOM!

原创
2018/12/28 10:45
阅读数 1.6K

什么是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被选择出来。

 

<div name=”demo”></div>

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

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

 

 getElementsByClassName

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

<div class=”demo”></div>

<div class=”demo”></div>

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

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

 

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

<div class=”demo”></div>

<div class=”demo demo1″></div>

<div class=”demo1″></div>

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

 

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

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

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

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

 

 • getElementsByTagName

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

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

 

 • getElementsByName

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

<input name=”123″/>

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

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

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

 

 • querySelector()

 • querySelectorAll()

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

 

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

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

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

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

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

<div class=”content”>111</div>

<div class=”content”>222</div>

<div class=”content”>333</div>

 

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>

      <p><strong></strong></p>

</div>

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

• childNodes 子节点们

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

<div>

      <p><strong></strong></p>

</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结构树

浏览器除了可以处理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类中均有定义。

展开阅读全文
打赏
2
5 收藏
分享
加载中
更多评论
打赏
0 评论
5 收藏
2
分享
返回顶部
顶部