前言：
上篇文章大概说了一下DOM，但是还不是很了解，这里在说说。
一、什么是DOM？
DOM 是英文Document Object Model的缩写，即文档对象模型。它是一种跨平台的、独立于编程语言的API，它把HTML、XHTML或XML文档当作一个树结构，而每个节点视为一个对象，这些对象可以被编程语言操作，进而改变文档的结构，映射到文档的显示。相信学习过BS的人都知道，对HTML应用很广泛，但是让自己实际运用起来还是有困难的，HTML代码中的一些状态是怎么改变的并不是太清楚，学习了DOM就知道了。
简单来说，DOM就是我们为了方便编程语言对HTML等文档进行操作，就是针对HTML和XML提供一个ＡＰＩ，提供了对文档的结构化的表述，并定义了如何使程序中对改结构进行访问，从而改变文档的结构，样式和内容。所以啊，把HTML文档中的节点全部视为一个个的对象，然后这些对象依照层级关系形成一棵树，这棵树就命名为DOM树。有了对象，编程就方便多了，只要一层层拿到对象就可以优雅地改变对象的属性进而动态地改变HTML等文档的展示。
二、操作
1.如何创建元素
这个方法是创建元素的时候将添加进去的对象放在上一个之前，就像我们发布博客一样，把每次发布的都放在最开始的那一页，以至于我们找的时候很不好找，这种只适合创建一个元素。
<!DOCTYPE html>
<html>
<head>
<title>创建元素</title>
<script >
Window.οnlοad=function()
{
Var oBtn=document.getElementById('btn');
Var oUl=document.getElementById('ul1');
Var oTxt=document.getElementById('txt1');
oBtn.onclick =function()
{
//创建对象，默认将元素放在上一个对象之前。
Var oLi=document.createElement('li')
oLi.innerHTML=oTxt.value;
//父级.appendChild(子节点)，添加到父级的末尾。
oUl.appendChild(oLi)
};
};
</script>
</head>
<body>
<input id="txt1" type="text/">
<input id="btn1" type="button" value="创建li">
</body>
</html>2.插入元素
这种方法就解决了每次添加的元素都跑到最后的情况，这种方法就是每次将插入的元素放在最前面，也就是第一页的第一个。
<!DOCTYPE html>
<html>
<head>
<title>插入元素</title>
<script >
Window.οnlοad=function()
{
Var oBtn=document.getElementById('btn');
Var oUl=document.getElementById('ul1');
Var oTxt=document.getElementById('txt1');
oBtn.onclick =function()
{
Var oLi=document.createElement('li')
Var aLi=oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
//如果插入元素之前没有插入过对象，那就把插入的元素放在第一个。
//要是插入过元素就将这个元素放在上一个对象之前，浏览的时候为第一个。
If(aLi.length>0)
{
oUl.insertBefore(oLi,aLi[0])
}
Else
{
oUl.appendChild(oli);
}
};
</script>
</head>
<body>
<input id="txt1" type="text/">
<input id="btn1" type="button" value="创建li">
<ul id="ul1">
</body>3.删除元素
有了创建和插入肯定就要有删除。
<!DOCTYPE html>
<html>
<head>
<title>删除元素</title>
<script >
window.οnlοad=function()
{
Var aA=document.getElementById('a');
Var oUl=document.getElementsById('ul1');
For(var i=0;i<aLi.length;i++)
{
aA[i].οnclick=function()
{
oUl.removeChild(this.parentNode);
}
}
}；
</script>
</head>
<body>
<ul id="ul1">
<li>afsdfdfasdf<a herf="javascript:;"></a>删除
<li>sgfsg <a herf="javascript:;"></a>删除
<li>gfhdght<a herf="javascript:;"></a>删除
<li>sdfarewtgs<a herf="javascript:;"></a>删除</ul>
</body>
</html>