javaScript學習筆記 No.1 -- DOM

<DOM title="Document Object Model">
    <DOM中的D>
        既是HTML中的內容，包括文本、圖片、表格、表單及其屬性（包括CSS）
    </DOM中的D> 
    <DOM中的O>
        對象，東西。將Document實物化
    </DOM中的O>
    <DOM中的M>
        模型，或地圖（Map），Document實物化得到的Object的結構圖。理解爲family tree最佳，應用此樹來鎖定HTML中的節點從而進行操作
        <節點 title="Node">
            <元素節點 title="element node">
                就是組成HTML的基本元素，如<p><br><img>等標籤元素，一般認爲元素節點是構成HTML的基本元素
                其實在DOM中，元素節點可分爲 文本節點 和 屬性節點
            </元素節點>
            <文本節點>
                <p>這裏是文本節點</p>
            </文本節點>
            <屬性節點>
                <p title="a dog">Pat</p>   <!--類似於（title="a dog"）的是元素節點-->
            </屬性節點>
            並非所有的元素節點都包含屬性節點，但是屬性節點一定是包含在元素節點裏
            注意：雖然這三者有包含關係，但是在DOM中都叫節點，是同一類東西
        </節點>
        <getElementById>
            getElementById()方法：這是與document對象相關聯的函數。顧名思義，根據元素節點的Id屬性得到該元素節點，返回一個對象引用
            <example>
                document.getElementById('purchases');//得到Id爲‘purchases’的元素節點，如：<p id="purchases">...</p>
            </example>
        </getElementById>
        <getElementsByTagName>
            getElementsByTagName()方法：與getElementById()相似，只不過TagName（標籤名）通常會出現很多次，會查找到多個Elements
            返回一個包含對象引用的數組
            <example>
                var items = document.getELementsByTagName('p'); //將包含引用的數組傳給items
                alert(items.length); //array.length ，得到數組長度
                for (key in items){   //類似於PHP的foreach，遍歷數組很方便
                    alert( typeof items[key]);  //typeof： 節點的類型，會看到滿眼的Object，即每個元素都是一個對象
                }
            </example>
        </getELementsByTagName>
    </DOM中的M>
    <小節>
        1.一份文檔就是一個節點家族樹
        2.節點分爲不同的三種類型
        3.getElementById() 返回一個對象引用，對應文檔裏的一個特定的元素節點（element node）
        4.getElementsByTagName() 返回一個對象引用的數組，對應文檔裏的一些特定的元素節點
        5.這些節點都是對象 
    </小節>
    <還有兩個方法>
        getAttribute() 與 setAttribute() ：得到一個節點的屬性值 與 設置/修改一個節點的屬性值
        不同於上面的兩個方法，這兩個方法不是document的方法，而是與對象關聯的方法
        不能通過docuemnt.來調用，要通過某一對象來調用
        <example>
            var paras = document.getElementsByTagName('p');
            for (key in paras){
                var title_text = paras[key].getAttribute('title'); //輸出<p>標籤的title的值，如果有的<p>不含title屬性，則返回NULL
                if (!title_text) { //如果爲空的話
                    paras[key].setAttribute('title', 'New title comes up'); //設置title屬性
                    title_text = paras[key].getAttribute('title');
                }
                alert(title_text);
            }
        </example>
    </還有兩個方法>
</DOM>