首页 > > 网页制作 > css >

初识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简易入门教程

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签