1.案例一：在末尾添加节点
1.1 步骤
（1）获取到ul标签
（2）创建li标签，createElement
（3）创建文本标签，createElement
（4）将文本添加到li下面，appendChild
（5）将li添加到ul的末尾，appendChild
1.2 实现
<ul id="ulid">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<input type="button" value="add" onclick="add1();"/>
<script type="text/javascript">
function add1(){
//获取ul标签
var ul1=document.getElementById("ulid");
//创建li标签
var li1=document.createElement("li");
//创建文本
var tex1=document.createTextNode("555");
//把文本加入到li
li1.appendChild(tex1);
//把li加入到ul下面
ul1.appendChild(li1);
}
</script>
2.元素对象（element对象）
2.1 获取element对象-通过document里面相应的方法获取
2.2方法
（1）获取属性getAttribute()方法
<input type="text" id="inputid" value="aaaa"> <script type="text/javascript"> //获取到input标签 var input1=document.getElementById("inputid"); //alert(input1.value); alert(input1.getAttribute("value")); </script>
（2）设置属性setAttribute()方法
<input type="text" id="inputid" value="aaaa"> <script type="text/javascript"> var input1=document.getElementById("inputid"); alert(input1.getAttribute("class")); input1.setAttribute("class","haha"); alert(input1.getAttribute("class")); </script>
（3）删除属性 removeAttribute()方法
<input type="text" name="name1" id="inputid" value="aaaa"> <script type="text/javascript"> var input1=document.getElementById("inputid"); alert(input1.getAttribute("name")); input1.removeAttribute("name"); alert(input1.getAttribute("name")); </script>
-该属性不能删除value
2.3 获取标签下面的子标签
（1）使用属性childNodes，兼容性差
（2）唯一有效方法：使用getElementsByTagName()方法
<ul id="ulid1">
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
</ul>
<script type="text/javascript">
//获取到ul下面的所有子标签(子元素)
//获取ul标签
var ul11=document.getElementById("ulid1");
//获取ul下面的子标签
var lis=ul11.getElementsByTagName("li");
alert(lis.length);
</script>
3. Node对象
3.1 属性一
（1）nodeName
（2）nodeType
（3）nodeValue
（4）节点与其对应的值
-标签节点对应的值
//获取标签对象 var span1=document.getElementById("spanid"); alert(span1.nodeType);//1 alert(span1.nodeName);//SPAN alert(span1.nodeValue);//null
-属性节点对应的值
//属性 var id1=span1.getAttributeNode("id"); alert(id1.nodeType);//2 alert(id1.nodeName);//id alert(id1.nodeValue);//spanid
-文本节点对应的值
//获取文本 var text1=span1.firstChild; alert(text1.nodeType);//3 alert(text1.nodeName);//#text alert(text1.nodeValue);//哈哈呵呵
3.2 属性二
<ul >
<li>qqqqq</li>
<li>wwwww</li>
</ul>
（1）父节点
-ul是li的父节点
-parentNode
（2）子节点
-li是ul的子几点
-childNodes：获取指定节点的所有子节点，但是兼容性很差
-firstChild：获取第一个子节点
-lastChild：获取最后一个子节点
（3）同辈节点
-li直接关系是同辈节点
-nextSibling：返回一个给定节点的下一个兄弟节点
-previousSibling：返回一个给定节点的上一个兄弟节点
4. 操作dom树
4.1 appendChild方法
（1）添加子节点到末尾
（2）特点：类似于剪切黏贴的效果
4.2 insertBefore(NewNode,oldNode)方法
（1）在某个节点之前插入一个新的节点
（2）两个参数
--要插入的节点
--在哪个节点之前插入
（3）步骤
-创建一个插入节点
--创建标签，创建文本，将文本添加到标签下面
function insert1(){ /* 1.获取到li13标签 2.创建li 3.创建文本 4.把文本添加到li下面 5.获取到ul 6.把li添加到ul下面 */ //获取li3标签 var li13=document.getElementById("li13"); //创建li var li15=document.createElement("li"); //创建文本 var text15=document.createTextNode("董小宛"); //把文本添加到li下面，appendChild li15.appendChild(text15); //获取到ul var ul21=document.getElementById("ulid21"); //在貂蝉之前添加董小宛 ul21.insertBefore(li15,li13); }
（4）没有insertAfter()方法
4.3 removeChild方法，删除节点
（1）通过父节点删除，自身不能执行
function remove1(){ /* 1.获取到li24标签 2.获取父节点ul标签 3.执行删除 */ var li24=document.getElementById("li24"); var ulid31=document.getElementById("ulid31"); //删除 ulid31.removeChild(li24); }
4.4 replaceChild(newNode,oldNode)，替换节点
（1）通过父节点替换，两个参数（替换成的节点，被替换的节点）
function replace1(){ /* 1.获取到li 2.创建标签li 3.创建文本 4.将文本添加到li下面 5.获取标签ul 6.执行替换 */ var li34=document.getElementById("li34"); var li35=document.createElement("li35"); var text1=document.createTextNode("张无忌"); li35.appendChild(text1); var ulid41=document.getElementById("ulid41"); ulid41.replaceChild(li35,li34); }
4.5 cloneNode(boolean)，复制节点
（1）代码
function copy1(){ //把ul列表赋值到另外一个div中 /* 1.获取到ul 2.指定复制方法 cloneNode方法复制 true 3.把复制之后的内容方法div里面去 获取到div appendChild方法 */ //获取ul var ulid41=document.getElementById("ulid41"); //复制ul，放到类似剪切板里面 var ulcopy=ulid41.cloneNode(true); //获取到div var divv=document.getElementById("divv"); divv.appendChild(ulcopy); }
5.innerHTML属性
5.1该属性不是dom的组成部分，但是大部分浏览器都支持
（1）作用1：获取文本内容
var span1=document.getElementById("sid"); alert(span1.innerHTML);
（2）作用2：向标签里设置内容（可以是HTML代码）
//向div里面设置内容<h1> AAA</h1> var div11=document.getElementById("div11"); //设置内容 div11.innerHTML="<h1> AAA</h1>";