初识DOM(文档对象模型)

2018-11-22 08:41:56来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

什么是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写的。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:零基础学习web前端路线

下一篇:给萌新的Flexbox简易入门教程