備忘:由於胃出血，DOM的例子(還是很重要很好的，一共有五個)沒有敲。現在將核心基礎知識總結在此
DOM ：DOM是Document Object Model文件物件模型的縮寫
關於什麼是節點：
如果說Java是物件導向編程，那麼DOM是面向節點編程
1,整個文檔就是一個文檔節點(即document)。
2,每一個HMTL標籤都是一個元素節點。
3,標籤中的文字則是文本節點。
4,標籤的屬性是屬性節點。
一切都是節點……
1,關於元素節點的操作：
尋找元素節點
方法(1)：getElementById() 尋找一個有著給定 id 屬性值的元素，傳回值是一個有著給定 id 屬性值的元素節點
注意此方法只能用於document對象，即只有document可以調用此方法。
方法(2)：getElementsByTagName()尋找有著給定標籤名的所有元素，這個方法將返回一個節點集合，常用的屬性有length。
該方法不必非得用在整個文檔上(即不是只有document可以調用)。它也可以用來在某個特定元素的子節點當中尋找有著給定標籤名的元素。
比如：
var eduSelectElement=document.getElementById("edu");
var eduOptionsElements=eduSelectElement.getElementsByTagName("option");
獲得了eduSelectElement節點下的所有標籤名為option的元素節點
var eduOptionsElements=document.getElementsByTagName("option");
獲得了整個文檔下的標籤名為option的元素節點
方法(3)：getElementsByName()尋找有著給定name屬性的所有元素，傳回值是一個集合，常用的屬性有length。
注意：注意此方法只能用於document對象，即只有document可以調用此方法；這點和getElementsByTagName()不一樣
建立元素節點
createElement()按照給定的標籤名建立一個新的元素節點。是document調用此方法。
方法的傳回值：是一個指向建立節點的引用指標。
注意此節點不會自動添加到document裡面。
2,關於節點的操作
hasChildNodes()該方法用來檢查一個元素是否有子節點
注意：文本節點和屬性節點不可能再包含任何子節點！！！
可以利用此方法如果傳回值為真，再利用firstChild或者lastchild來此元素的第一個或者最後一個子項目
replaceChild()把一個給定父元素裡的一個子節點替換為另外一個子節點.即調用時父節點.replaceChild()
其傳回值是一個指向已被替換的那個子節點的引用指標。
如果被插入的子節點還有子節點，則那些子節點也被插入到目標節點中
尤其要注意這兩點：
(1):是父節點調用此方法
(2):注意傳回值
舉例：
<body>
您喜歡的城市:<br>
<ul id="test">
<li id="bj" value="beijing" >北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing"> 重慶</li>
</ul>
您喜歡的遊戲:<br>
<ul>
<li id="fk" value="fangkong">反恐</li>
<li id="ms" value="moshou">魔獸</li>
<li id="cq" value="chuanqi">傳奇</li>
</ul>
</body>
注意:要是把城市裡的第一個節點替換為遊戲裡的節點，那麼是整體替換！！而不是簡簡單單的把"北京"替換為"反恐"
即城市裡的<li id="bj" value="beijing" >北京</li>變成了<li id="fk" value="fangkong">反恐</li>
appendChild()為給定元素增加一個子節點。該方法通常與 createElement() createTextNode() 配合使用
insertBefore()把一個給定節點插入到一個給定元素節點的某個子節點的前面。如var reference = element.insertBefore(newNode,targetNode);
即節點 newNode 將被插入到元素節點 element 中並出現在節點 targetNode 的前面.
該方法通常與 createElement() 和 createTextNode() 配合使用
注意：
(1)節點 targetNode 必須是 element 元素的一個子節點。
(2)DOM 沒有提供 insertAfter() 方法
removeChild()從一個給定元素裡刪除一個子節點，即父節點.removeChild()。當刪除某個節點可用parentNode屬性獲得其父節點
說明:某個節點被removeChild()方法刪除時,這個節點所包含的所有子節點將同時被刪除。
ChildNodes()遍曆子節點。返回一個數組，這個數組由給定元素節點的子節點構成。因為屬性節點和文本節點沒有子節點，所以
這個方法是元素節點所特有的。
此方法經常配合firstChild(等價於ChildNodes[0])和lastchild使用。
nextSibling: 返回一個給定節點的下一個兄弟節點。
parentNode：返回一個給定節點的父節點。
注意:
(1)parentNode 屬性返回的節點永遠是一個元素節點，因為只有元素節點才有可能包含子節點。
(2)document 節點沒有父節點。
previousSibling：返回一個給定節點的上一個兄弟節點
innerHTML
用於向一個標籤裡插入HTML。使用起來很方便。
瀏覽器幾乎都支援該屬性，但不是 DOM 標準的組成部分。
3,DOM節點的屬性
每個節點都具備以下屬性：nodeName，nodeType，nodeValue
如果節點是元素節點，nodeName返回這個元素的名稱
如果節點是屬性節點，nodeName返回這個屬性的名稱
如果節點是文本節點，nodeName返回一個內容為#text 的字串
注意nodeType的傳回值是整數
如果給定節點是屬性節點，nodeValue傳回值是這個屬性的值。
如果給定節點是文本節點，nodeValue傳回值是這個文本節點的內容。
如果給定節點是元素節點，nodeValue傳回值是 null
4,關於屬性節點的操作
注意：屬性節點不是元素節點的孩子
得到屬性節點的方法：element.getAttributeNode("屬性名稱"),其傳回值是一個屬性節點
說明:這個方法的實際意義不大,因為我們一般的操作是想得到某個屬性的值。
得到屬性節點的值的兩個方法:
方法1:先利用element.getAttributeNode("屬性名稱")返回一個屬性節點然後調用.nodeValue()
方法2:直接利用element.getAttribute("屬性名稱")
總結:方法1在不同的瀏覽器支援不一樣，效能顯得不穩定。所以一般採用方法2
element.setAttribute()給元素節點添加一個新的屬性值或改變它的現有屬性的值。
5,關於文本節點的操作
注意：文本節點是元素節點的孩子
建立文本節點：
createTextNode()建立一個包含著給定文本的新文本節點。方法的傳回值是一個指向建立文本節點引用指標。
新元素節點不會自動添加到document裡
得到文本節點的兩個方法：
var liElements=document.getElementsByTagName("li");
for(var i=0;i<liElements.length;i++){
方法1：
alert(liElements[i].childNodes[0].nodeName);
alert(liElements[i].childNodes[0].nodeType);
alert(liElements[i].childNodes[0].nodeValue);
方法2：
alert(liElements[i].firstChild.nodeName);
alert(liElements[i].firstChild.nodeType);
alert(liElements[i].firstChild.nodeValue);
}
設定文本節點值的兩個方法:
方法1：
liElements[i].childNodes[0].nodeValue="南京";
方法2：
liElements[i].firstChild.nodeValue="古都南京";
總結：
一定要清楚文本節點是元素節點的孩子，但是屬性節點不是。
所以它們的建立和得到等方式是不一樣的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
