初识DOM（文档对象模型）

Elle 发布于2019-04-23 13:10 / 1478人阅读

摘要：什么是什么是什么叫做呢的全称是文档对象模型，定义了表示和修改文档所需的对象这些对象的行为和属性以及这些对象之间的关系。对象即为宿主对象，由浏览器厂商定义，用来操作的功能的一类对象和集合。简单来说，就是用来操作和的，它是一系列对象的集合。

什么是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()方法。

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

111

222

333

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写的。

云服务器 GPU云服务器 DOM文档 mongodb文档数据模型删除dom对象 dom对象操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1520.html

初识DOM

摘要：标识，就是将页面解析为一个文档。标识，就是中表示各个对象之间的关系。的标准由于的标准规范是由组织起草并定义的，所以对的定义是目前最权威的解释。兄弟关系具有相同父级元素的两个或几个元素之间的兄弟关系。是返回值，表示定位元素的集合，是一个集合。如何使用JavaScript script元素元素元素用于在HTML页面中嵌入或引入JavaScript脚本代码。该元素默认被定义在元素中。t...

史占广 2019-08-29 16:31 评论0 收藏0
初识DOM

摘要：标识，就是将页面解析为一个文档。标识，就是中表示各个对象之间的关系。的标准由于的标准规范是由组织起草并定义的，所以对的定义是目前最权威的解释。兄弟关系具有相同父级元素的两个或几个元素之间的兄弟关系。是返回值，表示定位元素的集合，是一个集合。如何使用JavaScript script元素元素元素用于在HTML页面中嵌入或引入JavaScript脚本代码。该元素默认被定义在元素中。t...

qpal 2019-08-02 16:31 评论0 收藏0
初识DOM

摘要：标识，就是将页面解析为一个文档。标识，就是中表示各个对象之间的关系。的标准由于的标准规范是由组织起草并定义的，所以对的定义是目前最权威的解释。兄弟关系具有相同父级元素的两个或几个元素之间的兄弟关系。是返回值，表示定位元素的集合，是一个集合。如何使用JavaScript script元素元素元素用于在HTML页面中嵌入或引入JavaScript脚本代码。该元素默认被定义在元素中。t...

Coding01 2019-08-23 11:31 评论0 收藏0
初识HTML和WEB标准

摘要：开始标签和结束标签也被称为开放标签和闭合标签。网页主要由三部分组成结构表现和行为对应标准也分三方面结构化标准语言表现标准语言行为标准。表现标准语言主要是，用于对网页进行美化。初识HTML和WEB标准什么是 HTML？ HTML 超文本标记语言的缩写(Hyper Text Markup Language) HTML 并不是编程语言，而是一种标记语言(markup language) 标记...

zombieda 2019-04-23 13:42 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0