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

初识DOM(文档对象模型)的更多相关文章

  1. javascript之DOM文档对象模型编程的引入

    /* DOM(Document Object Model) 文档对象模型 一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的 对象进行描述,我们在浏览器上看 ...

  2. JavaScript(三、DOM文档对象模型)

    一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: &q ...

  3. html--JavaScript之DOM (文档对象模型)

    一.简介 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标 ...

  4. DOM文档对象模型简介

    DOM简介     DOM是W3C(万维网联盟)的标准 "W3C文档对象模型DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构.样式".W3C DOM ...

  5. dom文档对象模型图

  6. 文档对象模型 DOM

    1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...

  7. JavaScript交互式网页设计 • 【第4章 JavaScript文档对象模型】

    全部章节   >>>> 本章目录 4.1 文档对象模型简介及属性 4.1.1 文档对象模型概述 4.1.3 实践练习 4.2 document 对象查找 HTML 元素 4.2 ...

  8. DOM(文档对象模型)

    1.定义: DOM是Document Object Model文档对象模型的缩写.是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 例如:我们有一段HTML,那么如何访问第二层第一个 ...

  9. 文档对象模型(DOM)中的结点属性

    在文档对象模型中,每个结点都是一个对象.DOM结点有三个重要的属性:nodeName .nodeValue和nodeType,分别表示结点名称.结点的值和结点的类型 一.nodeName,结点名称,只 ...

  10. 文档对象模型(DOM)

    文档对象模型(DOM)    DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型:文档型节点.元素节点.特性节点.注释节点等共有12种节点类型.DOM1级定义了 ...

随机推荐

  1. 机器学习基石笔记:16 Three Learning Principles

    三个理论上界: 三个线性模型: 三个关键工具: 三条学习规则: 1.奥卡姆剃刀定律 先从简单模型开始, 训练后出现欠拟合, 再尝试复杂点模型. 2.采样误差 训练.验证.测试数据尽量同分布. 3.数据 ...

  2. flask框架--cookie,session

    今天我又给大家分享一下怎么用flask框架来实现像淘宝购物车一样存储数据,并且把存储的数据删除,这个方法可以用两个方法都可以做成,一个是cookie,另一个是session. session是依赖于c ...

  3. 【转】通过js获取系统版本以及浏览器版本

    function getOsInfo() { var userAgent = navigator.userAgent.toLowerCase(); var name = 'Unknown'; var ...

  4. copy代码的时候,如何去掉代码前边的编号

    从网页上拷贝下来的代码前面总有编号,如何去掉! 1.使用正则表达式:在editorplus(notepad++)里按ctrl+h,弹出框里勾选上“正则表达式(regular expression)”, ...

  5. android自定义控件 几种方式总结

    方式1:不继承任何组件 , 直接在代码里面调用实例化.public class ProgressDialog { private Dialog dialog; public ProgressDialo ...

  6. android开发学习——day7

    线性布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...

  7. OAuth 2.0 安全案例回顾

    原文:http://drops.wooyun.org/papers/598 0x00 背景 纵观账号互通发展史,可以发现OAuth比起其它协议(如OpenID)更流行的原因是,业务双方不仅要求账号本身 ...

  8. Android中Serializable和Parcelable序列化对象详解

    学习内容: 1.序列化的目的 2.Android中序列化的两种方式 3.Parcelable与Serializable的性能比较 4.Android中如何使用Parcelable进行序列化操作 5.P ...

  9. [个人项目] echarts 实现数据(tooltip)自动轮播插件

    前言 最近, 工作中要做类似这种的项目. 用到了百度的 echarts 这个开源的数据可视化的框架. 因为投屏项目不像PC端的WEB, 它不允许用户用鼠标键盘等交互. 有些图表只能看到各部分的占比情况 ...

  10. ilspy反编译

    资料: http://www.cnblogs.com/JamesLi2015/archive/2011/09/08/2170519.html 软件: http://ilspy.net/