time:2015/10/28 20：29

今天上午一上午的课，没时间看了，中午玩了两把lol，睡了一觉就到下午3点了，迷迷糊糊的起来继续看，直到晚上才把今天上午的内容看完。下午的看来还得留到明天了。腰都酸了！！！ BY： coder.bing

概要：
1.案例：在末尾添加节点。
2.元素对象
3.Node对象
4.操作DOM树
5.innerHTML属性
6.动态显示时间小案例

1.在末尾添加节点案例
第一步：获取ul标签（document.getElementById）
第二步：创建li标签（document.createElement）
第三步：创建文本（document.createTextNode）
第四步：把文本添加到li下面（appendChild）
第五步：把li添加到ul末尾（appendChild）
<body> <ul id="ulid"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> <br /> <input type="button" value="add" onclick="add1();"> <script type="text/javascript"> //在末尾添加节点 function add1() { //获取到ul标签 var ul1 = document.getElementById("ulid"); //创建标签 var li1 = document.createElement("li"); //创建文本 var text1 = document.createTextNode("5555"); //把文本加入到li下面 li1.appendChild(text1); //把li加入到ul下面 ul1.appendChild(li1);

} </script> </body>

2.元素对象（element对象）
要操作element对象，必须先获取到element，使用document里面相应的方法获取。
方法：
（1）获取属性里面的值
getAttribute(“属性名称”);
（2）设置属性的值
input1.setAttribute(“class”,”haha”);
（3）删除属性
input1.removeAttribute(“name”);
×不能删除value里面的值
<body> <input type="text" name="name1" id="inputid" value="aaaa" /> <script type="text/javascript"> var input1=document.getElementById("inputid"); alert(input1.value); alert(input1.getAttribute("value")); alert(input1.getAttribute("name")); input1.removeAttribute("name"); alert(input1.getAttribute("name")); </script> </body>
想要获取标签下面的子标签
使用属性 chaildNodes，但是这个属性兼容性很差
<body> <ul id="ulid1"> <li>aaaaaaa</li> <li>bbbbbb</li> <li>cccccccc</li> </ul> <script type="text/javascript"> var ul1=document.getElementById("ulid1"); //var lis=ul1.childNodes; var lis=ul1.getElementsByTagName("li"); alert(lis.length); </script> </body>
获得标签下面子标签的唯一有效方法，使用getElementsByTagName方法

3.Node对象属性
nodeName
nodeType
nodeValue

使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象。
标签节点对应的值
<body> <span id="spanid">bcoder.cn</span> <script type="text/javascript"> var span1=document.getElementById("spanid"); alert(span1.nodeType); //1 alert(span1.nodeName); //SPAN alert(span1.nodeValue); //null </script> </body>
属性节点应的值
var id1=span1.getAttribute("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); //bcoder.cn
4.Node对象属性二（针对标签之间的操作）
父节点
<ul>
<li>bcoder.clbug.com</li>
<li>coder.bing</li>
</ul>
ul是li的父节点(parentNode)
子节点
li是ul的子节点
childNodes：得到所有子节点，但是兼容性较差
firstChild：获取第一个子节点
lastChild：获取最后一个子节点
同辈节点
li直接关系是同辈节点
nextSibling: 返回一个给定节点的下一个兄弟节点
previousSibling: 返回一个给定节点的上一个兄弟节点
var li3=document.getElementById(“li3”);
alert(li3.nextSibling.id);
alert(li3.previousSibling.id);
<body> <ul id="ulid"> <li id="li1">wwww</li> <li id="li2">.bcoder</li> <li id="li3">.cn</li> </ul> <script type="text/javascript"> var li1 =document.getElementById("li"); var ul1=li1.parentNode; alert(ul1.id); var ul1 = document.getElementById("ulid"); var li1=ul1.firstChild; alert(li1.id); var li1=ul1.lastChild; </script> </body>

5.操作DOM树
（1）appendChild方法
添加子节点到末尾
特点：类似于剪切粘贴的效果
（2）insetBefore(newNode,oldNode)方法
在某个节点之前插入一个新的节点
两个参数：
要插入的节点
在谁之前插入
<body> <ul id="ulid"> <li id="li1">西施</li> <li id="li2">王昭君</li> <li id="li3">貂蝉</li> <li id="li4">杨玉环</li> </ul> <input type="button" value="insert" onclick="insert1()" /> <script type="text/javascript"> function insert1(){ //获取li3标签 var li3i=document.getElementById("li3"); //创建新的li var li5i=document.getElementById("li"); //创建文本 var text5i=document.createTextNode("董小碗"); //把文本添加到li下面 li5i.appendChild("text5i"); //获取ul var ulidd = document.getElementById("ulid"); //插入 ulidd.insertBefore(li5i,li3i); } </script> </body> （3）removeChild方法删除节点 function remove1(){ //1.获取li标签 //2.获取父节点ul标签 //4.执行删除（通过父节点） var li11=document.getElementById("li1"); var ulidd=document.getElementById("ulid"); ulidd.removeChild(li11); }
（4）replaceChild(newNode,olNodel)方法：替换节点
不能自己替换自己，通过父节点替换
步骤：
1.获取要替换的li
2.创建新标签li
3.创建文本
4.把文本添加到新的li下面
5.获取ul
6.替换节点
（5）cloneNode(boolean) 复制节点
//操作：把ul列表复制到另一个div里面去
1.获取ul （document.getElementById）
2.执行复制方法cloneNode方法复制true （ull.cloneNode(true)）
3.吧复制之后的内容方法div里面去（appendChild）

操作dom总结：
获取节点方法：
getElementById()
getElementsByName()
getElementsByTagName()
插入节点的方法：
insertBefore()
appendChild()
替换节点方法：
replaceChild()

6. innerHTML属性
这个属性不是dom的组成部分，但是大多数浏览器都支持的属性
第一个作用：获取文本内容
var span1=document.getElementById(“sid”);
alert(span1.innerHTML);
第二个作用：向标签里设置内容(可以是html代码)
//操作：向div里面设置内容
//获取div
var div11 = document.getElementById(“div11″);
div.innerHTML=”<h1>bcoder.cn</h1>”;

7.案例：动态显示时间
（1）得到当前时间：
var date=new Date();
var d1=date.toLocaleString();
（2）需要让页面每一个秒获取时间
setInterval方法定时器
（3）显示到页面上
每一秒向div里面写一次时间，使用innerHTML
代码：
<body> <div id="times"> </div> <script type="text/javascript"> function getD1(){ var date=new Date(); var dl=date.toLocaleString(); var div1=document.getElementById("times"); div1.innerHTML=dl; } //使用定时器实现每一秒写一次时间 setInterval("getD1();",1000); </script> </body>