DOM
在DOM中如果想訪問文檔中位置很深的某個節點，或者一組節點。我們可以使用下面的多種方式進行擷取。
•1.document.getElementById()
•2.document.getElementsByName()
•3.document.getElementsByTagName()
•在前面的ppt中我們學習了1、3方法，第2個方法用來擷取所有那麼特徵等於指定值的元素。注意返回的是一個數組。
•例如：
•<input type="radio" name="radColor" value="red" />Red
•<input type="radio" name="radColor" value="green" />Green
•<input type="radio" name="radColor" value="blue" />Blue
•考慮上面的一段代碼，頁面會詢問使用者喜歡哪種顏色。所有選項按鈕都使用同樣的名字，因為只要這個欄位返回一個值即可。
若要獲得所有選項按鈕元素的引用可以使用下面的代碼：
•varoRadios= document.getElementsByName("radColor");
•然後可以進行迴圈處理
•for(vari=0;i<oRadio.length;i++){....}
•這裡特別注意一下：IE6在這個方法的使用上還存在一些錯誤。首先他們會返回id等於給定名稱的元素。第二，他們僅僅檢查<input/>和<img/>元素。
除了可以通過直接指定一個節點的特徵來引用這個節點，還可以通過節點間的關係來引用相對節點，下面將分別做一個介紹。
childNodes屬性讓我們可以從給定文檔的節點樹裡把任何一個元素的所有子項目檢索出來。
•childNodes屬性將返回一個數組，這個數組包含給定元素節點的全體元素。
•用法：element.childNodes
•假如想引用文檔的body元素的全體元素我們可以使用getElementsByTagName()方法來得到body元素。因為每份文檔只有一個body元素。所以我們使用：
•varbody_element= document.getElementByTagName("body")[0];
•現在body_element已經指向了文檔的body元素。接下來，可以用如下所示的文法標記把body元素的全體元素檢索出來：
•body_element.childNodes
•ps:body元素還可以使用document.body來引用。
如果想引用文檔的html節點－根節點可以使用：
•document.childNodes[0];
•而<head><body>節點是<html>的子節點，可以分別用一下兩條語句引用：
•document.childNodes[0].childNodes[0];//引用<head>節點
•document.childNodes[1].childNodes[1];//引用<body>節點
•DOM 除了childNodes還提供我們直接引用子節點的屬性，分別是：
•element.firstChild;
•element.lastChild;
•他們分別表示第一個子結點和最後一個子結點。
html節點層次是一個樹型結構，除了根節點外，每個節點都僅有一個父節點，可以由parentNode屬性來引用，文法是：element.parentNode
•比如：
•<tr>
•<td id="td1">...</td>
•</tr>
•我們可以用：
•vartdNode= document.getElementById("td1");
•這樣得到td節點然後使用
•vartrNode= tdNode.parentNode;
•這樣就可以得到tr節點。
和引用父節點類似的，DOM提供了引用兄弟節點的屬性。在html文檔中屬於同一個文檔層次的節點稱為兄弟節點。
•<trid="tr1">
•<td id="td1">...</td>
•<td id="td2">...</td>
•</tr>
•<trid="tr2">
•<td id="td3">...</td>
•<td id="td4">...</td>
•</tr>
•我們可以使用element.nextSibling;引用上一個兄弟節點。
•使用element.previousSibling；引用下一個兄弟節點。
•這裡面tr1和tr2是兄弟節點td1和td2也是兄弟節點。td2和td3不是兄弟節點
•如果該節點沒有相應的兄弟節點的化則屬性返回null
1.nodeName屬性擷取節點名
•文法如下：
•Node.nodeName
•在不同的節點類型中，nodeName的傳回值將有所差異。
•如果是元素節點返回標記的名稱，如果是屬性節點則返回屬性名稱。如果是文本節點則返迴文本的內容
文法是:Node.nodeType;
•nodeType屬性共有12種可取值，其中僅有3種具有實用價值：元素節點、屬性節點和文本節點。
•元素節點的nodeType的屬性值是1
•屬性節點的nodeType的屬性值是2
•文本節點的nodeType的屬性值是3
文法：Node.nodeValue;
•不同類型的節點有不同的傳回值；
•如果是元素節點返回null，屬性節點返回undefined，文本節點返迴文本內容。
•看下例子04
使用hasChildNodes()判斷給定節點是否有子節點。
•Node.hasChildNodes();
•如果有子節點返回true，沒有返回false
使用tagName擷取元素節點的標記名稱
•該元素是元素節點的專屬屬性，和nodeName具有同樣的傳回值，即返回標記的名稱。在此就不做介紹了。
下拉式清單幾個常用屬性用法
下拉式清單是常用的對象對應<select></select>每個下拉式清單中都有許多個<option>組成。下面幾個例子說明幾個常用屬性用法。
•1)value屬性
•2)length屬性擷取選項的個數
•3)使用option屬性擷取選項集合
•varoptionItem= document.getElementById("proAnalyse");
•for(vari=0;i<optionItem.length;i++){
•if(optionItem.options[i].value==proAnalyseId)
•optionItem.options[i].selected=true;
•}
•4)使用option的value屬性和text屬性
•<option value="apple">蘋果</option>
•這裡value值為“apple”,text值為“蘋果”
5)使用selected屬性
•如：3）中示範
•每個option對象有2個狀態選中與未選中，對應selected值為true與false。
•6)使用select對象的onchange事件
•這時select對象最重要的事件
•<select name="adam" onchange="alert()">
•<option value="1" selected>1</option>
•<option value="2">2</option>
•</select>
•7)為select添加一個選項
•為增加一個選項，必須建立一個option對象。
•someSelect.options[someSelect.length]=new Option(text,value);
•比如添加4則Option("4","4")
8)從select對象中刪除一個選項
•刪除一個選項很簡單，就是將下拉式清單方塊指定索引的選項置為null。
•someSelect.options[1]=null;
•將索引為1的選項刪除。
•9)清空select選項
•select.length=0;
•10)替換一個選項。
•就是將對應選項處建立新選項
架構的提示
1. 父架構調用子架構
–window.frames[“frameName”]
–應用子架構內的子架構就可以類推：
–window.frameName.frameName
2. 子架構調用父架構
–每個window對象都有一個parent屬性，表示它的父架構，可以通過window.parent來表示父架構。
3. 兄弟架構引用
–parent.frames[“brotherFrameName”]
–注意window可以省略
4. 不同層次引用
–只要得到window 屬性就可以實現。所以架構中的架構可以使用window.frameName.frameName這樣的疊加來調用。
5. 頂層架構引用
–window的top屬性工作表示。
–if(self==top)//表示判斷當前頁面是否為頂層架構
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
