js擴展

關於函數

函數是可重覆執行的包含特定功能的代碼段。

js中的命名函數和匿名函數

<button id="btn1" onclick="func()">點擊我吧</button>
<button id="btn2">點擊它吧</button>    

<script>
    //命名函數
    function func(){
        //代碼段
        alert('點擊我吧');
    }
    
    //匿名函數
    var btn2 = document.getElementById('btn2');
    btn2.onclick = function(){
        //代碼段
        alert('點擊它吧');
    }
</script>

關於DOM

DOM：Document Object Model，稱為文檔對象模型，在網頁載入時，可以將結構化文檔在記憶體中轉換為對象結構樹。簡單的說，DOM並不是一種技術，而是一種訪問結構化文檔的一種思想。借用DOM模型，我們可以對DOM樹進行修改、刪除、新增等操作，讓結構化文檔動態化。
DOM模型中的節點--文檔可以說是由節點構成的集合。在DOM模型中有以下3種節點：

• 元素節點：各種標簽就是這些元素節點的名稱，如<p>、<ul>等
• 屬性節點：一般用來修飾元素節點就稱為屬性節點
• 文本節點：文本節點總是被包含在元素節點的內部

註：為了動態地修改html元素，須先訪問html元素。

查找HTML元素

document.getElementById()            //id   
document.getElementsByClassName()    //class
document.getElementsByName()         //name
document.getElementsByTagName()      //tagName

對元素節點的操作：

//創建節點
document.createElement(tag);    //tag必須是合法的html元素

//複製節點
document.cloneNode(boolean deep);    //deep為true，複製所有後帶節點，為false，只複製當前節點

//添加節點
node.appendChild(newNode)
node.insertBefore(newNode, refNode)

//修改
node.replaceChild(newNode, oldNode)

//刪除
node.removeChild(oldNode)

對屬性節點的操作：

//添加
node.setAttribute('屬性名', '值');

//刪除
node.removeAttribute('屬性名');

//修改
node.setAttribute('屬性名', '值');

//查詢
node.getAttribute('屬性名')

對文本節點的操作：

//添加、刪除、修改、查詢
node.innerHTML = '';

註：通過DOM還可以修改HTML標簽節點的樣式：
document.getElementById(id).style.property = new style