======================復習=============================
========================================================
快捷鍵：操作節點(caozuojiedian)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必須導入該文件，搜狗輸入domready.js-->
<script>
myReady(function(){
// var myul=document.getElementById('myul');//獲得ul對象
// var li=document.createElement("li");//創建li對象
// var txt=document.createTextNode("4");//創建文本對象
// li.appendChild(txt);//給li對象添加文本對象。
// myul.appendChild(li);//給myul對象添加子元素，添加到最后子元素后面。
//
// var firstChild=myul.firstElementChild;//獲得第一個子元素。
// myul.appendChild(firstChild);//返回的是被添加的對象。把第一個子節點移動到對象myul元素中最后一個//子元素后面。這里並沒有復制。而是移動。
// var obj=myul.appendChild(firstChild);//這里並沒有再次移動第一個子元素。只是做一次讀取操作。
// console.log(obj);//顯示：<li>1</li> 該li對象。返回被添加的對象。
//ul.insertBefore(newLi,liTwo); 指定在某個父元素ul里面，把newLi元素對象添加到指定liTwo元素對象前面。如果第二個參數對象為null，那么直接把對象newLi對象添加到父元素里面最后面的子元素后面，類似於：ul.appendChild(newLi);
// var ul=document.getElementById("myul");//獲取ul對象
// var newLi=document.createElement("li");//創建li元素對象
// var txt=document.createTextNode("4");//創建文本節點對象
// newLi.appendChild(txt);//把文本節點添加到元素節點li對象中。
// var liTwo=ul.children[1];//獲取ul對象的第二個子節點對象
//var liTwo=ul.children.item(1);//獲取ul對象的第二個子節點對象
// var ret=ul.insertBefore(newLi,liTwo);//把li元素節點添加到ul的第二個子節點之前。ul.insertBefore(newObj,obj)，insertBefore方法跟兩個數，newObj是添加的對象，obj被指定位置前面添加的對象。即：在指定的父級元素ul對象里面，把某個對象加到指定對象的前面。
// console.log(ret);//返回添加的對象：<li>4</li>
// console.log(ret.innerHTML);//返回對象里面的文本內容。
// ul.insertBefore(newLi,null);//把newLi直接添加到ul里面最后子元素的后面。
//ul.insertBefore(newLi,ul.firstElementChild);//把newLi直接添加到ul第一個子節點前面。
//ul.insertBefore(newLi,ul.lastElementChild);//把newLi直接添加到ul中最后一個子節點前面。
//ul.replaceChild(newLi,li2); 指定父元素ul下面，用新創建的對象newLi，把指定的li2對象替換掉，如果ul父元素中不存在li2對象，那么就會報錯。
// var myUl=document.getElementById("myUl");//獲取ul對象。
// var newLi=document.createElement("li");//創建li對象
// var txt=document.createTextNode("5");//創建文本節點對象
// newLi.appendChild(txt);//把文本節點txt裝填到li元素對象中。
// var ret=myUl.replaceChild(newLi,myUl.children.item(1));//用newLi元素對象替換ul中的第二個子元素對象。
// console.log(ret);//返回:被替換的子元素對象<li>2</li>,在firefox中可以查看各種屬性，在chrome中只顯示對象本省。
//ul.cloneNode(boolean);可以跟一個布爾值,默認是false可以省略，false:表示只復制當前節點對象，不復制子節點和孫子節點；true:表示深度復制。包括所有子節點以及孫子節點。cloneNode( )方法克隆所有屬性以及他們的值,如果需要克隆所有后代 需要把deep參數設置為true，默認是 false
// var myUl=document.getElementById("myUl");
// var cloneUl=myUl.cloneNode();//只復制當前節點對象，不復制子節點和孫子節點值為false時，可以省略。
// console.log(cloneUl);//控制台打印所復制的節點
//document.body.insertBefore(cloneUl,null);// 把復制的節點添加到文檔中的body子元素的末尾。
// document.body.appendChild(cloneUl);
//div.normalize();//將相鄰的兩個文本節點合並。方法移除空的文本節點，並連接相鄰的文本節點
// var myDiv=document.createElement("div");//創建div元素對象
// var txt1=document.createTextNode("woaini");//創建第一個文本節點對象
// myDiv.appendChild(txt1);//將文本節點txt1添加到div元素對象中。
// var txt2=document.createTextNode("我愛你");//創建第二個文本節點.
// myDiv.appendChild(txt2);//將文本節點txt2添加到div元素對象中。
// document.body.appendChild(myDiv);
// console.log(myDiv.childNodes.length);//獲取所有子節點包括空節點，即：沒有html標簽的文字節點,所以這里的值為：2;
// console.log(myDiv.childElementCount); 只獲取有html標簽的節點，以上都是文本節點，所以這里的值為：0.
// myDiv.normalize();//將相鄰的兩個文本節點合並。
// console.log(myDiv.childNodes.length);//返回1.
// console.log(myDiv.firstChild.wholeText);//輸出第一個子節點的內容。
//技巧：如果想要了解某個對象的屬性，可以直接使用firefox或者chrome在網頁控制台中輸出該對象，點擊該對象即可查看所有的屬性。如上data可以，使用console.log(myDiv.firstChild)點擊該對象查看屬性，想要得到該對象的值，可以查看后使用：data: "woaini我愛你"，nodeValue: "woaini我愛你"，textContent: "woaini我愛你"，wholeText: "woaini我愛你"
//splitText()方法將在指定的 offset 處把 Text 節點分割成兩個節點。原始的 Text 節點將被修改，使它包含 offset 指定的位置之前的文本內容（但不包括文本內容）。新的 Text 節點將被創建，用於存放從 offset 位置（包括該位置上的字符）到原字符結尾的所有字符。新的 Text 節點是該方法的返回值。splitText() 方法按照指定的 offset 把文本節點分割為兩個節點
// var myDiv=document.createElement("div");
// var txt=document.createTextNode("我愛你woaini");
// myDiv.appendChild(txt);
// document.body.appendChild(myDiv);
// var newTxt= myDiv.firstChild.splitText(1);//把myDiv的第一個文本節點以索引1前面拆分為兩個文本對象。
// console.log(newTxt);//返回：索引從1到最后的文本對象："愛你woaini"。
// console.log(myDiv.childNodes);//獲取拆分后的所有節點對象 NodeList(2) [text, text] text表示文本對象
// console.log(myDiv.childNodes[0]);//獲取第一個子元素文本節點 "我"
// console.log(myDiv.childNodes[1]);//獲取第二個子元素文本節點 "我愛你woaini" 計算所有子節點對象，包括空節點和文本節點(類數組對象)
//console.log(myDiv.children[1]);只計算有html標簽的對象，這里沒有
//div.removeChild(index);必須傳入一個索引參數，否則報錯，如果需要刪除所有子元素，則可使用遍歷刪除所有子元素。
// var myUl=document.getElementById("myUl");//獲取ul對象
// console.log(myUl.childNodes.length);//返回：7 獲取子節點長度。包括空文本。
// var remove=myUl.removeChild(myUl.childNodes[1]);//返回刪除myUll的第幾個子節點。childNodes返回的是類數組對象，該對象包括空文本對象。返回的是被刪除的對象。這是第一套DOM操作API
// console.log(remove);
// console.log(myUl.childElementCount);//獲取非空子節點長度。這里子節點總數為：3，只有3個html標簽元素
// console.log(myUl.removeChild(myUl.children[2]));//返回被刪除的對象：<li>3</li>，移除下標為2的元素對象。這里使用的第二套DOM操作 API。
// console.log(myUl.childNodes.length);//返回：7 刪除后的myUl對象的所有子元素長度。
//!表示相反，+表示轉換為Number，"\v"：IE表示為字符串"v"，非IE表示為一個垂直制表符:可以理解為一個空格。1表示1。 !+"\v1"，IE解析為：Number("v1")返回isNaN,!isNaN就是真，其他瀏覽器返回false
// if (!+"\v1") {
// alert("love");//IE瀏覽器顯示
// }else{
// alert("you");//非IE瀏覽器顯示
// }
//removeNode(deep);這是IE私有實現方法。deep深度，true/false，true深度刪除子節點，false只刪除本身節點，不刪除子節點以及孫子節點。
// var myUl=document.getElementById("myUl");
// var rem=myUl.removeNode(true);//返回被刪除的對象（包括子節點和孫子節點），刪除myUl對象本身
// console.log(rem.outerHTML);//console.log(rem.tagName);
//body.removeChild(document.getElementById("span"));//移除子節點，只有在IE6-IE8中才會返回一個文檔碎片對象，久而久之會引發內存泄露的問題，其他瀏覽器則不會，因為返回值是null。
// var div=document.createElement("div");//創建div對象
// console.log(div.parentNode);//創建div對象而沒有進行裝填到DOM樹上，獲取它的父元素節點時，所有的瀏覽器都返回null。
//將div對象添加到DOM樹上再移除，只在IE6-IE8會返回一個文檔碎片對象，可以重復使用該對象，久而久之會存在一個內存溢出的現象。其他瀏覽器則不會，因為返回值是null。
// document.body.removeChild(document.body.appendChild(div));//添加div后在移除div對象。
// console.log(div.parentNode);//IE6-IE8返回一個Object對象,用戶可以操作，時間一久IE6-IE8會出現內存泄露，其他瀏覽器則不會，因為返回值是null。
//console.log(div.parentNode.nodeType);//直接報錯
// //body.innerHTML="";表示刪除body標簽內的所有子元素以及孫子元素。
// var myUl=document.getElementById("myUl");//獲取ul對象
// document.body.innerHTML="";//刪除body里面的所有內容。
// console.log(myUl.parentNode);//返回null，獲取myUl的父節點。
var myUl2=document.getElementById("myUl2");
myUl2.parentNode.removeChild(myUl2);//獲取myUl2的父元素刪除myUl2元素對象
//使用removeChild在IE6-IE8中，刪除對象以及后代節點，但是該節點是可以訪問的，並不是完全刪除，但是不在內存中。所以myUl2.innerHTML正常打印。
console.log(myUl2.id+"---"+myUl2.innerHTML);//打印被刪除對象的id和內容
var myUl=document.getElementById("myUl");
myUl.parentNode.innerHTML="";//清空對象myUl里面的子節點以及孫子節點
//使用innerHTML在IE6-IE8中，會把對象里面的所有子節點以及孫子節點全部清空，不可再訪問。所以下面的myUl.innerTHML是空的，訪問不到。
console.log(myUl.id+myUl.innerHTML);//打印被刪除對象的id和內容
})
</script>
</head>
<body id="body">
<ul id="myUl">
<li>1<a>1</a></li>
<li>2</li>
<li>3</li>
</ul>
<ul id="myUl2">
<li>1<a>1</a></li>
<li>2</li>
<li>3</li>
</ul>
</body>