節點及其類型

1. 元素節點
2. 屬性節點: 元素的屬性, 可以直接通過屬性的方式來操作.
3. 文本節點: 是元素節點的子節點, 其內容為文本.

在 html 文檔的什麽位置編寫 js 代碼

• 直接在 html 頁面中書寫代碼， js 和 html 強耦合, 不利用代碼的維護

• 一般地, 不能在 body 節點之前來直接獲取 body 內的節點, 因為此時 html 文檔樹還沒有加載完成,
• 一般地, 在 body 節點之前編寫 js 代碼, 但需要利用 window.onload 事件,該事件在當前文檔完全加載之後被觸發, 所以其中的代碼可以獲取到當前文檔的任何節點.

• 在整個 html 文檔的最後編寫類似代碼，有利於頁面的加載

window.onload = function(){};

獲取元素節點

1. document.getElementById: 根據 id 屬性獲取對應的單個節點
2. document.getElementsByTagName：根據標簽名獲取指定節點名字的數組, 數組對象 length 屬性可以獲取數組的長度
3. document.getElementsByName：

• 根據節點的 name 屬性獲取符合條件的節點數組，但 ie 的實現方式和 W3C 標準有差別：

• • 在 html 文檔中若某節點(li)沒有 name 屬性，則 ie 使用 getElementsByName 不能獲取到節點數組, 但火狐可以.

獲取屬性節點

• 可以直接通過 cityNode.id 這樣的方式來獲取和設置屬性節點的值
• 通過元素節點的 getAttributeNode 方法來獲取屬性節點, 然後在通過 nodeValue 來讀寫屬性值

獲取元素的子節點

• childNodes 屬性獲取全部的子節點, 但該方法不實用. 因為如果要獲取指定的節點 的指定子節點的集合, 可以直接調用元素節點的 getElementsByTagName() 方法來獲取.
• firstChild 屬性獲取第一個子節點
• lastChild 屬性獲取最後一個子節點

獲取文本節點

• 步驟: 元素節點 --> 獲取元素節點的子節點
• 若元素節點只有文本節點一個子節點, 可以先獲取到指定的元素節點 eleNode, 然後利用 eleNode.firstChild.nodeValue 的方法來讀寫其文本節點的值

節點的屬性

• nodeName：代表當前節點的名字。只讀屬性，如果給定節點是一個文本節點, nodeName 屬性將返回內容為 #text 的字符串

• nodeType：返回一個整數, 這個數值代表著給定節點的類型，只讀屬性。1 -- 元素節點, 2 -- 屬性節點, 3 -- 文本節點

• nodeValue：返回給定節點的當前值(字符串). 可讀寫的屬性

• • 元素節點, 返回值是 null.
  • 屬性節點: 返回值是這個屬性的值
  • 文本節點: 返回值是這個文本節點的內容

創建一個元素節點

? 1). createElement(): 按照給定的標簽名創建一個新的元素節點. 方法只有一個參數：被創建的元素節點的名字, 是一個字符串.

? 方法的返回值：是一個指向新建元素 節點的引用指針.

? 新元素節點不會自動添加到文檔裏, 它只是一個存在於 JavaScript 上下文的對象.

創建一個文本節點

createTextNode()

• 返回值是一個指向新建文本節點引用指針.
• 方法只有一個參數：新建文本節點所包含的文本字符串.
• 新元素節點不會自動添加到文檔裏

為元素節點添加子節點

• appendChild(), 方法的返回值是一個指向新增子節點的引用指針.
• 直接用innerHTML屬性也行

節點的替換

• replaceChild(newChild,oldChild)：

• • 把一個給定父元素裏的一個子節點替換為另外一個子節點
  • 返回值是一個指向已被替換的那個子節點的引用指針

• 該節點除了替換功能以外還有移動的功能.

• 該方法只能完成單向替換, 若需要使用雙向替換, 需要自定義函數:

function replaceEach(aNode, bNode){
    if(aNode == bNode){
    return;
}
var aParentNode = aNode.parentNode;
//若 aNode 有父節點
if(aParentNode){
    var bParentNode = bNode.parentNode;
}
//若 bNode 有父節點
if(bParentNode){
    var tempNode = aNode.cloneNode(true);
    bParentNode.replaceChild(tempNode, bNode);
    aParentNode.replaceChild(bNode, aNode);
}

插入節點

• insertBefore(newNode,targetNode)：

• • 把一個給定節點插入到一個給定元素節點的給定子節點的前面
  • 節點 targetNode 必須是 element 元素的一個子節點
  • 該方法同時含有移動的功能。

• 自定義 insertAfter() 方法（將 newChild 插入到 refChild 的後邊 ）

function insertAfter(newChild, refChild){
    var refParentNode = refChild.parentNode;
    //判斷 refChild 是否存在父節點
    if(refParentNode){
        //判斷 refChild 節點是否為其父節點的最後一個子節點
        if(refChild == refParentNode.lastChild){
            refParentNode.appendChild(newChild);
        }else{
            // 下一個兄弟節點
            refParentNode.insertBefore(newChild, refChild.nextSibling);     
        }
    }
}

刪除節點：

removeChild(node)

• 從一個給定元素裏刪除一個子節點
• 返回值是一個指向已被刪除的子節點的引用指針. 節點被刪除時, 這個節點所包含的所有子節點將同時被刪除.
• 如果想刪除某個節點, 但不知道它的父節點是哪一個, parentNode 屬性可以幫忙。

DOM對象與JQuery對象互轉

jQuery對象是一個DOM對象數組，可以使用數組下標的方式轉為DOM對象

var btn = $("#btn-add")[0];

$(dom)將Dom轉為jquery對象

JavsScript中DOM的基本操作