文章目录
一、什么是DOM
什么是DOM？逐步分解各个单词，D-O-M，D就是Document（文档）；O就是Object（对象）；M就是Model（模型）。合起来就是文档对象模型……很粗暴。那么文档对象模型是什么呢？
文档对象模型就是一种与浏览器、平台、语言无关的接口，通过DOM可以访问页面中的其他标准组件。它给开发者定义了一个标准的方法，使他们访问页面中的数据、脚本还有表现层对象。也就是说脚本可以直接操控页面中的标签。
DOM采用的是树形结构，学过数据结构的可能都不陌生。比如下面一段HTML代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>标题</h1>
<b>加粗</b>
</body>
</html>
根节点就是html标签，然后逐步往下，画个图吧：
每个部分称为节点。JS文档对象模型就是用来操作这些节点的。
二、DOM对象节点属性
在DOM中使用节点属性对节点进行查询，查询各个节点的名称、类型、节点值、兄弟儿子节点等等。
下表展示了一些DOM对象节点的属性：
| 属性 | 说明 |
|---|---|
nodeName |
节点的名称 |
nodeValue |
节点的值、通常只用了文本节点 |
nodeType |
节点的类型 |
parentNode |
返回当前节点的父节点 |
childNodes |
子节点列表 |
firstChild |
第一个子节点 |
lastChild |
最后一个子节点 |
previousSibling |
当前节点的前一个兄弟节点 |
nextSibling |
后一个兄弟节点 |
attributes |
元素的属性列表 |
在对节点进行查询的时候，首先使用getElementById()方法来访问指定id的节点，操作各个节点的父母亲兄弟子孙属性可以实现DOM树的遍历。
三、节点的操作
主要包括创建、插入、复制、删除和替换。
1、创建节点
创建节点首先要使用文档对象中的createElement()方法和createTextNode()方法，生成一个新元素，并生成文本节点。最后通过appendChild()方法将创建的新节点添加到当前节点的末尾。
appendChild()方法将新的子节点添加到当前节点的末尾，语法如下：
obj.apppendChild(newChild)
其中newChild表示新的节点
例子：补全古诗
先来看一下效果：
步骤1： 写HTML代码，声明一个<div>标签然后起一个ID，写入已经存在的诗句，然后怼一个<form>添加一个text控件和button控件，用于响应用户操作
<div id="poemDiv">
<div class="poemtitle">春晓</div>
<div class="poem">春眠不觉晓</div>
<div class="poem">处处闻啼鸟</div>
<div class="poem">夜来风雨声</div>
</div>
<p>
<form name="demo">
请输入最后一句:<input type="text" name="last">
<input type="button" value="添加" onclick="completePoem()">
</form>
步骤2： 写JS代码，按照上面说的步骤，首先用createElement()创建一个<div>标签，再用createTextNode()创建一个文本（内容填充为text控件的value），接着把创建在文本添加到第一次创建的<div>标签后面，最后添加到总的div标签，代码如下：
<script type="text/javascript">
function completePoem() {
var div = document.createElement('div'); //生成div元素
div.className='poem';
var last = demo.last.value; //为div元素添加CSS类
txt = document.createTextNode(last); //生成文本节点
div.appendChild(txt); //将文本节点添加到创建的div元素中
//将创建的div元素添加到id为poemDiv的div元素中
document.getElementById('poemDiv').appendChild(div);
}
</script>
2、插入节点
插入节点使用insertBefore()方法实现，该方法将新的节点添加到指定子节点的前面，格式如下：
obj.insertBefore(new,ref);
其中new代表新的节点，res代表在该节点前插入的节点。
例子：向页面中插入文本
首先看一下效果：
步骤1： 写HTML代码：
<h2 id="h">在上面插入节点</h2>
<form id="frm" name="frm">
输入文本：
<input type="text" name="demo">
<input type="button" name="c" value="插入" onclick="insetNode('h',frm.demo.value)" >
</form>
步骤2： 写JS代码，首先get到传值传过来的id的节点，然后创建一个文本为str的节点，最后判断一下get到的那个节点是否存在父节点， 如果存在父节点，在父结点中插入新的节点，代码如下：
<script>
function crNode(str) {
var newP = document.createElement("p");
var newTxt = document.createTextNode(str);
newP.appendChild(newTxt);
return newP;
}
function insetNode(nodeID,str) {
var node = document.getElementById(nodeID);
var newNode = crNode(str);
if(node.parentNode)
//在父节点中插入新创建的节点
node.parentNode.insertBefore(newNode,node);
}
</script>
3、复制节点
复制节点可以使用cloneNode()方法来实现，格式如下：
obj.cloneNode(deep);
其中deep是一个布尔值，表示是否为深度复制。
深度复制：将当前节点的所有子节点全部复制
简单复制：只复制当前节点，不复制子节点
例子：复制下拉菜单
先来看一下效果：
步骤1： 写HTML代码，怼一个下拉菜单，然后弄个<div>标签声明个id一会儿添加到这个<div>下面，然后添加两个button，代码如下：
<form>
<hr>
<select name="shopType" id="shopType">
<option value="%">请选择类型</option>
<option value="0">数码家电</option>
<option value="1">家用电器</option>
<option value="2">床上用品</option>
</select>
<hr>
</form>
<div id="demo"></div>
<input type="button" value="简单复制" onclick="Clone(false)">
<input type="button" value="深度复制" onclick="Clone(true)">
步骤2： 写JS代码首先get到下拉菜单节点，然后复制，然后添加到<div>标签下：
<script type="text/javascript">
function Clone(flag) {
var sel = document.getElementById("shopType");
var b = document.createElement("hr");
var newSel = sel.cloneNode(flag);
demo.appendChild(newSel);
demo.appendChild(b);
}
</script>
4、删除节点
删除节点使用removeChild()方法实现，格式如下：
obj.removeChild(oldChild);
其中oldChild表示需要删除的节点
例子：删除最后一个文本
先来看一下效果：
步骤1： 写HTML代码：
<h2>删除节点</h2>
<div id="demo">
<p>张无忌</p>
<p>赵敏</p>
<p>周芷若</p>
<p>张三丰</p>
</div>
<form>
<input type="button" value="删除" onclick="delNode()">
</form>
步骤2： 写JS代码，首先get到所在节点，然后判断是否有子节点，如果有子节点，就删除，代码如下：
<script>
function delNode() {
var node = document.getElementById("demo");
if(node.hasChildNodes())
node.removeChild(node.lastChild);
}
</script>
5、替换节点
替换子节点可以使用replaceChild()方法来实现，该方法用于将旧的节点替换为新的节点，格式如下：
obj.replaceChild(new,old);
其中new是替换后的新节点，old是替换的旧节点
例子：替换标记和文本
先看一下效果：
步骤1： 写HTML代码：
<b id="demo">要替换的文本内容</b>
<p></p>
输入标记：<input type="text" id="bj"><br>
输入文本：<input type="text" id="txt"><br>
<input type="button" value="替换" onclick="repN(bj.value,txt.value)">
步骤2： 写JS代码， 在函数中首先get到节点，然后判断该节点是否存在，接着创建一个节点，给他的id赋值为原来的id，最后添加文本，在原来get到那个节点的父结点中实现替换文本，代码如下：
<script>
function repN(bj,txt) {
var node = document.getElementById("demo");
if(node){
var newNode = document.createElement(bj);
var Txt = document.createTextNode(txt);
newNode.id="demo";
newNode.appendChild(Txt);
node.parentNode.replaceChild(newNode,node);
}
}
</script>
四、获取文档中的指定元素
获取完元素之后才可以继续操作，可以通过遍历文档树中的节点找到每个节点，但是太麻烦了；简单的方法可以通过元素的id属性获取元素，也可以通过元素的name属性获取元素。
1、通过元素的id属性获取元素
通过id属性获取元素，上面的例子已经用到了很多很多了，无非就一句话：
document.getElementById("userId");
通过获取元素id然后对元素进行操作
例子：在页面指定位置显示当前日期
效果预览：
代码：
<body onload="clockon()">
<div id="clock">当前日期：</div>
<script>
function clockon() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var date = now.getDate();
var day = now.getDay();
var week;
month++;
var arr_week = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
week = arr_week[day];
time = year + "年" + month + "月" + date + "日" + week;
var Texttime = document.createTextNode(time);
document.getElementById('clock').appendChild(Texttime);
}
</script>
</body>
2、通过元素的name属性获取元素
和获取id一样，只需要获取name属性就好了，语法如下：
document.getElementByName("userName");
和获取id不一样的是，获取name属性获取的是一个数组，包含了页面内所有同名元素。
如果要获取对应的的某一个，只需要取下标就可以了。
例子：实现电影图片的轮转效果
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现电影的轮换效果</title>
<style>
#tabs{
width:1200px;
height:320px;
overflow:hidden;
float:left;
position:relative;}
#tabs>a:not(:first-child){
display:none;}
</style>
<script>
var len = document.getElementsByName("i");
var pos = 0;
function changeImage() {
len[pos].style.display = "none";
pos ++ ;
if(pos==len.length) pos = 0;
len[pos].style.display = "block";
}
setInterval('changeImage()',3000);
</script>
</head>
<body>
<div id="tabs">
<a name="i" href="#"><img src="video/13.png" width="100%" height="100%"></a>
<a name="i" href="#"><img src="video/14.png" width="100%" height="100%"></a>
</div>
</body>
</html>