DOM文档对象模型
Document(文档)
创建一个网页并将该网页添加到WEB中，DOM就会根据这个网页创建一个文档对象。如果没有Document（文档）,DOM也就无从谈起。
Object(对象)
对象是一种独立的数据集合。例如文档对象，就是文档中元素与内容的数据集合。与某个特定对象相关联的变量被称为这个对象的属性，也可以通过某个特定的对象去调用的函数被称为这个对象的方法
Model(模型)
在DOM中，将文档对象表示为树状模型。在这个树状模型中，网页中的各个元素与内容表现为一个个相互连接的节点。
DOM是一种与浏览器、平台、语言无关的接口，通过DOM可以访问页面中其他标准组件。
DOM解决了javascript与JScript之间的冲突，给开发者定义了一格个标准的方法，使他们来访问站点中的数据、脚本和表现对象。
文档模型中，节点的三种类型：
元素节点：在HTML中，<body>、<p>、<a>等一系列标记，是这个文档的元素节点。元素节点组成了文档对象模型的语义逻辑结构。
文本节点：包含在元素节点中的内容部分，如<p>标记中的文本等。一般情况下，不为空的文本节点都是可见并呈现与浏览器的。
属性节点：元素节点的属性，如<a>标记的href属性与title属性等，一般情况下，大部分的属性节点都是隐藏在浏览器背后的，并且是不可见的。属性节点总是被包含于元素节点当中。
DOM对象节点属性
属性 |
说明 |
nodeName |
节点的名称 |
nodeValue |
节点的值，通常只应用于文本节点 |
nodeType |
节点的类型 |
parentNode |
返回当前节点的父元素 |
childNodes |
子节点列表 |
firstChild |
返回当前节点的第一个子节点 |
lastChild |
返回当前节点的最后一个子节点 |
previousSibling |
返回当前节点的前一个兄弟节点 |
nextSibling |
返回当前节点的后一个兄弟节点 |
attributes |
元素的属性列表 |
创建节点
obj.appendChild(newChild)
newChild:新的子节点
插入节点
insertBefore()方法将新的子节点添加到指定子节点的前面
obj.insertBefore(new,ref);
new:表示新的子节点 ref：指定一个节点，在这个节点前插入新的节点
复制节点
cloneNode()复制节点
obj.cloneNode(deep)
deep：该参数是一个Boolean值，表示是否为深度复制。深度复制是将当前节点的所有子节点全部复制，当值为true时，表示深度复制；当值为false时，表示简单复制，简单复制只复制当前节点
删除节点：
删除节点可以通过removeChild(oldChild)
obj.removeChild(oldChild)
oldChild:表示需要删除的节点
替换节点
替换节点可以使用replaceChild()方法来实现。该方法用来将旧节点替换成新的节点
obj.replace(new,old)
new:替换后的新节点 old:需要被替换的旧节点
-------------------------------------------------------------------------------------------------------
//补全古诗
<div id="shi">
<div>春眠不觉晓</div>
<div>处处闻啼鸟</div>
<div>夜来风雨声</div>
</div>
<form name="buquan">
<input type="text" name="shiju" />
<input type="button" value="添加" onclick="complete()" />
</form>
<script>
function complete(){
var txt=buquan.shiju.value;
var tian=document.createTextNode(txt);
document.getElementById('shi').appendChild(tian);
}
</script>
----------------------------------------------------------------------------------------------------------
<p id="show"></p>
<from name='form2' id='form2'>
请输入书名：<input type="text"id="bookname" name="bookname"/>
<select name="xuanze" id="xuanze">
<option value="red">红色 </option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
<input type="button" id="jiaru" value="加入" />
</from>
<script>
document.getElementById('jiaru').onclick=function(){
var book=document.getElementById('bookname').value;
//var wenben=document.createTextNode(book);
var wenben=document.createElement('span');
var zicolor=document.getElementById('xuanze').value;
wenben.innerHTML=book;
wenben.style.color=zicolor;
//文本节点没办法设置style属性
document.getElementById('show').appendChild(wenben);
}
----------------------------------------------------------------------------------------------------------------------
<h2 id="h">在上面插入节点</h2>
<form id="frm" name="frm">
输入文本：<input type="text" name="txt"/>
<input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value)" />
</form>
<script>
function crNode(str){//创建文本节点的函数
var newP=document.createElement('p');//创建P元素
var newTxt=document.createTextNode(str);//创建文本节点
newP.appendChild(newTxt);//将文本节点添加到创建的P元素中
return newP;//返回 创建的p元素
}
function insetNode(nodeId,str){//插进节点的函数
var node=document.getElementById(nodeId);//获取指定的id元素
var newNode=crNode(str);//创建节点
//document.body.insertBefore(newNode,node);
if(node.parentNode)//判断是否拥有父元素
{node.parentNode.insertBefore(newNode,node);}//将创建的节点插入到指定的元素前面
}
</script>
-----------------------------------------------------------------------------------------------------
<h3 id="h3">考试成绩列表</h3>
<p id="shuxue">数学：90分</p>
<p id="yuwen">语文：80分</p>
<p id="wuli">物理：85分</p>
<p id="huaxue">化学：88分</p>
<form id="chengji" name="chengji">
<label>添加考试科目及成绩：</label>
<input type="text" name="newfen"/>
<input type="button"value="添加成绩" onclick="addfen('wuli',document.chengji.newfen.value)"/>
</form>
<script>
function xinfen(fenzhi){
var yingyu=document.createElement('p');
var yingyu0=document.createTextNode(fenzhi);
yingyu.appendChild(yingyu0);
return yingyu;
}
function addfen(nodeId,fenzhi){
var nodex=document.getElementById(nodeId);
var yingyu=xinfen(fenzhi);
//document.body.insertBefore(yingyu,nodex);
if(nodex.parentNode)
{
nodex.parentNode.insertBefore(yingyu,nodex);//(新节点，指定一个节点，在这个节点前插入新的节点)
}
}
</script>