首頁 > 開發者 > JavaScript
標籤：list dtd 包含 ext 取數 http 相關 oct 表單
我們這裡所說的擷取元素節點的全部子節點包括元素子節點和文本節點兩種。
還是拿上一篇博文的代碼執行個體進行
分析：
<span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS代碼位置</title><script type="text/javascript">window.onload=function(){}</script></head><body> <p>你喜歡那個城市</p> <ul id="city"> <li id="bj" class="BJ" name="Beijing" style="color:red">北京市</li> <li>天津市</li> <li>上海市</li> <li>重慶市</li> </ul> <p>你喜歡那個遊戲</p> <ul id="game"> <li id="hsjj">紅色警戒</li> <li>天龍八部</li> <li>罪惡都市</li> <li>反恐精英</li> </ul> <p>選擇性別：</p> <input type="radio" name="sex" value="male" />男 <input type="radio" name="sex" value="female" />女</body></html></span></span>
因為節點能夠分為元素節點，屬性節點和文本節點。而這些節點又有三個很實用的屬性，nodeName屬性和
nodeType屬性是僅僅讀，而nodeValue屬性是能夠讀寫的：
執行個體：<span style="font-size:18px;"><span style="font-size:18px;">//擷取id="city"的元素節點var cityNode=document.getElementById("city");alert(cityNode.innerHTML);//擷取當前元素節點裡的內容。包括標籤與文本alert(cityNode.tagName);//返回：ULalert(cityNode.nodeName);//返回：UL，與tagName等價alert(cityNode.nodeType);//返回：1表示元素節點alert(cityNode.nodeValue);//返回：null(注意和innerHTML的差別)</span></span> 使用innerHTML 屬性返回到的內容為：
節點的階層能夠劃分為：父節點與子節點。兄弟節點兩種類型結構。當我們擷取當中一個元素節點的時候，
就能夠使用層次節點屬性來擷取與它相關層次的節點。而層次節點的屬性有：
(1)childNodes屬性
childNodes數屬效能夠擷取某一個元素節點的全部位元組點，這些位元組點包含元素位元組點和文本子節點。它返回的
也是一個位元組點對象數組。我們使用childNodes[n]返回子節點對象。同一時候我們能夠使用節點屬性中的nodeValue屬性
對其文本節點進行賦值。
在這裡我們要注意：
1)擷取的文本子節點無法使用innerHTML這個屬性輸出常值內容，由於這個是非W3C標準的屬性必須在擷取元素
節點的時候，才幹輸出裡麵包括的文本，然而元素節點能夠使用innerHTML 屬性和nodeValue屬性。
2)當我們操作元素節點賦值時，nodeValue屬性會把包括在文本裡的HTML轉義成特殊字元，從而達到單純文字的
效果，而innerHTML 屬性去能夠解析HTML，輸出解析後的HTML文檔。
執行個體一：
<span style="font-size:18px;"><span style="font-size:18px;">//擷取id="city"的元素節點var cityNode=document.getElementById("city");//擷取cityNode元素節點的子節點var liNodes=cityNode.childNodes;alert(liNodes);//返回：object nodeList表示節點對象數組alert(liNodes.length);//返回：9,這裡包括了4個元素節點和5個空文本節點(ul標籤內的空白部分)，針對非IE瀏覽器。IE是4個</span></span>
從得出的結果看出這個得到元素節點的全部位元組點並非如我們所願，我們僅僅想得到那4個li元素子節點，在IE瀏
覽器是自己主動迴避空白文本節點的，這是我們所想要的結果。
因此又回到了利用getElemntsBytagName()方法來擷取這4
個元素位元組點數組：
<span style="font-size:18px;"><span style="font-size:18px;">//擷取id="city"的元素節點var cityNode=document.getElementById("city");//擷取id="city"的元素節點中的全部元素名為li的元素子節點var liNodes=cityNode.getElementsByTagName("li");</span></span>
補充：另一個非W3C標準的children屬性，這個屬性是僅僅得到有效子節點。即忽略空文本節點：
<span style="font-size:18px;"><span style="font-size:18px;">//擷取id="city"的元素節點var cityNode=document.getElementById("city");//擷取元素節點的全部子節點var liNodes=cityNode.children;alert(liNodes);//返回：object HTMLCollectionalert(liNodes.length);//返回：4也就是4個li子項目節點alert(liNodes[0].nodeName);//返回：LI</span></span>
那麼我們從上面執行個體一(沒有忽略空白文本節點的)得到的位元組點數組再進行節點屬性操作。我們知道第一個li元素
子節點是全部位元組點的第二個，第一個是空白文本節點，以下的執行個體是以非IE瀏覽器進行的測試，IE瀏覽器的結果就
不再進行描寫敘述。
因此看以下的操作：
<span style="font-size:18px;"><span style="font-size:18px;">alert(liNodes[0]);//返回：object Text表示文本節點對象alert(liNodes[0].nodeName);//返回：#Textalert(liNodes[0].nodeType);//返回：3表示文本節點alert(liNodes[0].nodeValue);//返回：空liNodes.nodeValue="測試";//在HTML文檔中會輸出：測試</span></span>得到的子節點對象數組中的第二個是子項目節點：
<span style="font-size:18px;"><span style="font-size:18px;">alert(liNodes[1]);//返回：object HTMLLIElement表示元素節點對象alert(liNodes[1].nodeName);//返回：LIalert(liNodes[1].nodeType);//返回：1表示元素節點alert(liNodes[1].nodeValue);//返回：null</span></span>
從上面操作的情況來看這樣的擷取全部位元組點的方法並不有用，因此我們常常使用的是先利用getElementById()方
法擷取到指定位置的元素節點。再利用getElemntsBytagName()方法來擷取位元組點數組。這是我們推薦使用的。
(2)firstChild()方法和lastChild()方法
firstChild()方法用於擷取當前元素節點的第一個位元組點對象，相當於childNodes[0]；lastChild()方法用於擷取當前
元素節點的最後一個位元組點對象。相當於childNodes[childNodes.length-1]。相同的在這裡我們得到可能是文本子節點
對象或元素子節點對象，得到它們我們就能夠使用那三個節點屬性對它們進行操作。
執行個體：<span style="font-size:18px;"><span style="font-size:18px;">//擷取id="city"的元素節點var cityNode=document.getElementById("city");//擷取cityNode元素節點的第一個和最後一個子節點alert(cityNode.firstChild);//返回：object Text表示文本節點對象alert(cityNode.lastChild);//返回：object Text表示文本節點對象alert(cityNode.lastChild.nodeName);//返回：#text</span></span>
(3)parentNode屬性，prevousSlbling屬性和nextSibling屬性
parentNode屬性返回該節點的父節點，prevousSlbling屬性返回該節點的前一個同級節點，nextSibling屬性返回
該節點的後一個同級節點。
執行個體：
<span style="font-size:18px;"><span style="font-size:18px;">//擷取id="bj"的元素節點var bjNode=document.getElementById("bj");//擷取bjNode元素節點的父節點alert(bjNode.parentNode);//返回：object HTMLUListElementalert(bjNode.parentNode.nodeName);//返回：ULalert(bjNode.previousSibling);//返回：object text(由於id="bj"的元素節點的前一個是空白文本節點)alert(bjNode.nextSibling);//返回：object text</span></span>
上面總是提到空白文本節點，這個在IE瀏覽器中會自己主動迴避。可是其他的瀏覽會輸出。那麼我們怎麼樣做才幹讓
它們相容保持一致呢？這個須要我們手動移除：
<span style="font-size:18px;"><span style="font-size:18px;">//擷取id="city"的元素節點var cityNodes=document.getElementById("city");//擷取元素節點的全部子節點alert(removeSpace(cityNodes.childNodes).length);//返回：4,function removeSpace(node) { for(var i=0;i<node.length;i++){ if(node[i].nodeType===3&&/^\s+$/.test(node[i].nodeValue)){ node[i].parentNode.removeChild(node[i]); } } return node;}</span></span>
從上面返回的結果來看我們得到了我們想要的結果。這種相容性也非常好。跟用getElementsByTagName()方法
擷取元素子節點的個數是一樣的。
那麼我們在擷取第一個子節點和最後一個子節點後以及前一個同級節點與後一個同
級節點的時候相同的遇到了空文本節點的情況，也能夠移除，僅僅需將上面的方法改進一下就可以：
<span style="font-size:18px;"><span style="font-size:18px;">//擷取id="city"的元素節點var cityNodes=document.getElementById("city"); //擷取元素節點的全部子節點alert(removeSpace(cityNodes).firstChild.nodeName);//返回：LIfunction removeSpace(node) { for(var i=0;i<node.childNodes.length;i++){ if(node.childNodes[i].nodeType===3&&/^\s+$/.test(node.childNodes[i].nodeValue)){ node.childNodes[i].parentNode.removeChild(node.childNodes[i]); } } return node;}</span></span>
以下部分部分算是擷取屬性節點
(4)attributes屬性
attributes屬性返回該節點的屬性節點集合。attributes[0]表示的是最有一個節點，數組遍曆的時候是從後向前的，
這裡要注意。
執行個體：
<span style="font-size:18px;"><span style="font-size:18px;">//擷取id="bj"的元素節點var bjNode=document.getElementById("bj");//使用attributes屬性alert(bjNode.attributes);//返回：object NameNodeMapalert(bjNode.attributes.length);//返回：4表示屬性節點個數alert(bjNode.attributes[3]);//返回：Attr.從後向前遍曆alert(bjNode.attributes[3].nodeType)//返回：2，表示屬性節點alert(bjNode.attributes[3].nodeName)//返回：id</span></span>
說明：
1)該屬性在IE，Firefox或Google上執行一樣，也不知道是瀏覽器的原因。在2345瀏覽器遍曆結果是相反的。可
能是不相容吧。這裡算是一個疑問吧？
2)假設向擷取屬性的的值而且改變，我們推薦使用上一篇博文提到的方法，可是要注意我們使用為符合標準的
name屬性是不相容的，name屬性一般在表單元素中使用，其餘的沒有自己定義的name屬性：
<span style="font-size:18px;"><span style="font-size:18px;">//擷取id="bj"的元素節點var bjNode=document.getElementById("bj");//直接使用屬性alert(bjNode.id);//返回：bjalert(bjNode.style.color);//返回：red</span></span>
這兩篇博文說了這麼多。總結一下我們常常使用的方法(算上上一篇博文)：
一擷取元素節點常常使用的方法：(1)使用getElementById()方法通過id屬性擷取相應的單個元素節點。推薦使用。
(2)使用getElementByTagName()方法依據標籤擷取指定元素節點名字的數組，數組對象length屬效能夠擷取數組
的長度。推薦使用。
(3)使用getElementsByName()方法依據name屬性擷取相應的表單元素節點。這裡要注意是符合的表單元素中的
name屬性的值。擷取表單元素時推薦使用。
二擷取元素節點的子節點(僅僅有元素節點才有子節點)我們通常使用
(1)首先是先利用擷取元素節點的方法擷取到元素節點。再使用childNodes屬性擷取所有的子節點對象數組列表。
注意不相容性和空白文本節點。不推薦使用。
(2)首先是先利用擷取元素節點的方法擷取到元素節點，再使用firstChild屬性與lastChild屬性擷取元素節點的第一
個子節點和最後一個子節點。
這裡也要注意空白文本節點。推薦使用。
(3)首先利用擷取元素節點的方法擷取元素節點，再利用children屬性擷取全部它的全部有效子節點對象數組列
表。推薦使用。
(4)首先使用擷取元素節點的方法擷取到指定的元素節點，再使用getElemensByTagName()方法擷取全部的子元
素節點對象數組列表。推薦使用。
三擷取屬性節點
(1)因為屬性節點時某一指定元素節點的屬性，能夠通過先使用getElementById()方法通過id屬性擷取相應的單個
元素節點再利用“元素節點.屬性”這種方式來擷取和設定屬性節點的值。推薦使用。
(2)先利用擷取元素節點的方法擷取到元素節點，再使用Attribute屬性返回該節點的屬性節點集合。可是要注意瀏
覽器的相容性。這樣的不推薦使用。
四擷取文本節點(文本節點時元素節點的子節點)(1)首先也是利用擷取元素節點的方法擷取到元素節點，再利用元素節點的屬性innerHTML 屬性得到文本節點中的
常值內容。推薦使用。
(2)假設指定的元素節點中僅僅有一個子節點。也就是該子節點是文本節點。能夠先擷取文本節點所在的元素節點，
再利用firstChild屬性定位到文本節點，最後通過文本節點的nodeValue屬性擷取文本節點中的常值內容。推薦。
五擷取body元素節點
(1)使用document.getElemensByTagName("body")[0]擷取body元素節點。(2)使用document.body擷取body元素節點。
推薦使用。
輕鬆學習JavaScript二十一：DOM編程學習之擷取元素節點的子節點和屬性節點
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
