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