DOM即文档对象模型（Document Object Model），其定义了访问和操作 HTML 文档的标准方法。

DOM 将 HTML 文档表达为树结构，如下：

通过DOM，开发人员可以动态的添加、移除和修改页面的某一部分。

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。

始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS选择器document.getElementsByClassName()。

由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

例如：

 // 返回ID为'test'的节点：

 var test = document.getElementById('test');

 // 先定位ID为'test-table'的节点，再返回其内部所有tr节点：

 var trs = document.getElementById('test-table').getElementsByTagName('tr');

 // 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：

 var reds = document.getElementById('test-div').getElementsByClassName('red');

 // 获取节点test下的所有直属子节点:

 var cs = test.children;

 // 获取节点test下第一个、最后一个子节点：

 var first = test.firstElementChild;

 var last = test.lastElementChild;

第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便：

 // 通过querySelector获取ID为q1的节点：

 var q1 = document.querySelector('#q1');

 // 通过querySelectorAll获取q1节点内的符合条件的所有节点：

 var ps = q1.querySelectorAll('div.highlighted > p');

注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8仅有限支持。

严格地讲，我们这里的DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。

更新DOM

拿到一个DOM节点后，我们可以对它进行更新。

可以直接修改节点的文本，方法有两种：

一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

 // 获取<p id="p-id">...</p>

 var p = document.getElementById('p-id');

 // 设置文本为abc:

 p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>

 // 设置HTML:

 p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';

 // <p>...</p>的内部结构已修改

用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。

第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

 // 获取<p id="p-id">...</p>

 var p = document.getElementById('p-id');

 // 设置文本:

 p.innerText = '<script>alert("Hi")</script>';

 // HTML被自动编码，无法设置一个<script>节点:

 // <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。

修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize：

 // 获取<p id="p-id">...</p>

 var p = document.getElementById('p-id');

 // 设置CSS:

 p.style.color = '#ff0000';

 p.style.fontSize = '20px';

 p.style.paddingTop = '2em';

插入DOM

当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？

如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。

如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。

有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：

 <!-- HTML结构 -->

 <p id="js">JavaScript</p>

 <div id="list">

     <p id="java">Java</p>

     <p id="python">Python</p>

     <p id="scheme">Scheme</p>

 </div>

把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：

 var js = document.getElementById('js'),

     list = document.getElementById('list');

 list.appendChild(js);

现在，HTML结构变成了这样：

 <!-- HTML结构 -->

 <div id="list">

     <p id="java">Java</p>

     <p id="python">Python</p>

     <p id="scheme">Scheme</p>

     <p id="js">JavaScript</p>

 </div>

因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。

更多的时候我们会从零创建一个新的节点，然后插入到指定位置：

 var list = document.getElementById('list'),

     haskell = document.createElement('p');

 haskell.id = 'haskell';

 haskell.innerText = 'Haskell';

 list.appendChild(haskell);

这样我们就动态添加了一个新的节点：

 <!-- HTML结构 -->

 <div id="list">

     <p id="java">Java</p>

     <p id="python">Python</p>

     <p id="scheme">Scheme</p>

     <p id="haskell">Haskell</p>

 </div>

动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个<style>节点，然后把它添加到<head>节点的末尾，这样就动态地给文档添加了新的CSS定义：

 var d = document.createElement('style');

 d.setAttribute('type', 'text/css');

 d.innerHTML = 'p { color: red }';

 document.getElementsByTagName('head')[0].appendChild(d);

可以在Chrome的控制台执行上述代码，观察页面样式的变化。

insertBefore

如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

还是以上面的HTML为例，假定我们要把Haskell插入到Python之前：

 <!-- HTML结构 -->

 <div id="list">

     <p id="java">Java</p>

     <p id="python">Python</p>

     <p id="scheme">Scheme</p>

 </div>

可以这么写：

 var list = document.getElementById('list'),

     ref = document.getElementById('python'),

     haskell = document.createElement('p');

 haskell.id = 'haskell';

 haskell.innerText = 'Haskell';

 list.insertBefore(haskell, ref);

新的HTML结构如下：

 <!-- HTML结构 -->

 <div id="list">

     <p id="java">Java</p>

     <p id="haskell">Haskell</p>

     <p id="python">Python</p>

     <p id="scheme">Scheme</p>

 </div>

可见，使用insertBefore重点是要拿到一个“参考子节点”的引用。很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现：

 var i, c,

     list = document.getElementById('list');

 for (i = 0; i < list.children.length; i++) {

     c = list.children[i]; // 拿到第i个子节点

 }

删除DOM

删除一个DOM节点就比插入要容易得多。

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

 // 拿到待删除节点:

 var self = document.getElementById('to-be-removed');

 // 拿到父节点:

 var parent = self.parentElement;

 // 删除:

 var removed = parent.removeChild(self);

 removed === self; // true

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。

当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。

例如，对于如下HTML结构：

 <div id="parent">

     <p>First</p>

     <p>Second</p>

 </div>

当我们用如下代码删除子节点时：

 var parent = document.getElementById('parent');

 parent.removeChild(parent.children[0]);

 parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当<p>First</p>节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。

因此，删除多个节点时，要注意children属性时刻都在变化。

文档写入

document还提供了文档写入的功能，通过document.write和document.writeln可以直接向文档的最后添加HTML文本，如下：

 window.onload = function() {

     document.write("<p>Hello HTML5!</p>");

 };

该方法一般用在调试时方便输出信息，实际开发中不应该使用。

HTML5学习笔记（二十二）：DOM的更多相关文章

HTML5学习笔记（十二）：JavaScript新增Map和Set
Map JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对. 但是JavaScript的对象有个小问题,就是键必须是字符串.但实际上Nu ...
VSTO 学习笔记（十二）自定义公式与Ribbon
原文:VSTO 学习笔记(十二)自定义公式与Ribbon 这几天工作中在开发一个Excel插件,包含自定义公式,根据条件从数据库中查询结果.这次我们来做一个简单的测试,达到类似的目的. 即在Excel ...
汇编入门学习笔记（十二）—— int指令、port
疯狂的暑假学习之汇编入门学习笔记 (十二)-- int指令.port 參考: <汇编语言> 王爽第13.14章一.int指令 1. int指令引发的中断 int n指令,相当于引 ...
Binder学习笔记（十二）—— binder_transaction(...)都干了什么？
binder_open(...)都干了什么? 在回答binder_transaction(...)之前,还有一些基础设施要去探究,比如binder_open(...),binder_mmap(...) ...
如鹏网学习笔记（十二）HTML5
一.HTML5简介 HTML5是HTML语言第五次修改产生的新的HTML语言版本改进主要包括: 增加新的HTML标签或者属性.新的CSS样式属性.新的JavaScript API等.同时删除了一些过 ...
java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)
java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...
Android学习笔记（十二）——实战：制作一个聊天界面
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Pa ...
MySQL数据库学习笔记（十二）----开源工具DbUtils的使用（数据库的增删改查）
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
o'Reill的SVG精髓（第二版）学习笔记——第十二章
第十二章 SVG动画 12.1动画基础 SVG的动画特性基于万维网联盟的“同步多媒体集成语言”(SMIL)规范(http://www.w3.org/TR/SMIL3). 在这个动画系统中,我们可以指定 ...
Dynamic CRM 2013学习笔记（十二）实现子表合计（汇总，求和）功能的通用插件
上一篇 Dynamic CRM 2013学习笔记(十一)利用Javascript实现子表合计(汇总,求和)功能 , 介绍了如何用js来实现子表合计功能,这种方法要求在各个表单上添加js方法,如果有很多 ...

随机推荐

python3 数据库查询
#xiaodeng #python 3 #数据库查询 #第一种方法(fethall,返回所有行数据) import pymysql #connect链接服务器,注意和服务库编码一致 conn=pymy ...
转error while loading shared libraries的解決方法
error while loading shared libraries的解決方法者 icq 21:03 | 靜態連結網址 | 迴響 (0) | 引用 (1) | 點閱次數 (270) | Prog ...
RHEL7 光盘修复
光盘修复#rm -rf /boot/*#dd if=/dev/zero of=/dev/sda bs=446 count=1#systemctl rebootTroubleshooting(排错模式) ...
Android 仿知乎创意广告
代码地址如下:http://www.demodashi.com/demo/14904.html 一.概述貌似前段时间刷知乎看到的一种非常有特色的广告展现方式,即在列表页,某一个Item显示背后部分广 ...
navigationItem.rightBarButtonItem 设置背景图片，颜色更改解决的方法
self.navigationItem.rightBarButtonItem=[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@& ...
ios中项目
上一个版本 http://pan.baidu.com/share/link?shareid=2183244558&uk=923776187 下载地址 http://pan.baidu.com ...
vim 可视化模式（visual模式）
转文章为了便于选取文本,VIM 引入了可视(Visual)模式. 要选取一段文本,首先将光标移到段首,在普通模式下按 v 进入可视模式,然后把光标移到段末. 需要注意,光标所在字符是包含在选区中的 ...
Zabbix 常见问题处理整理
zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. 下载: http://www.zabbix.com/download.php 帮助:https://www ...
ubuntu远程桌面连接windows系统
现在用ubuntu系统,公司买了个windows的服务器,需要给配置一套环境,来回跑很麻烦,就想windows下可以的远程桌面,Linux应该也有. 现在自己的ubuntu13.10,无法进入桌面的“ ...
使用Nexus搭建Maven内部服务器
概述我们在使用maven时,一般通过网络上一些公共的maven仓库来获取jar包,但是有时候会碰到网速比较慢的情况就比较郁闷,Nexus是一个maven的服务器,可以让我们搭建一个本 ...

HTML5学习笔记（二十二）：DOM