JavaScript知識點整理之獲取元素與節點

【相關推薦：javascript影片教學、web前端】

取得元素

• 透過ID取得（ getElementById ）
• 透過name屬性（ getElementsByName ）
• 透過標籤名稱（ getElementsByTagName ）
• 透過類別名稱（ getElementsByClassName ）
• 透過選擇器取得一個元素（ querySelector ）
• 透過選擇器取得一組元素（ querySelectorAll ）
• 取得html的方法（ document.documentElement ）
• 取得body的方法（ document.body ）

1.透過ID取得（getElementById）

// 1 取得元素節點// 透過id的方式( 找出元素，大小寫敏感，如果有多個id只找到第一個)
    document.getElementById('p1');

• 上下文必須是document。
• 必須傳參數，參數是string類型，是取得元素的id。
• 傳回值只取得到一個元素，沒有找到回傳null。

2.透過類別名稱（getElementsByClassName）

// 透過類別名稱找出元素，多個類別名稱用空格分隔,得到一個HTMLCollection(一個元素集合，有length屬性，可以透過索引號碼存取裡面的某一個元素)
    var cls = document.getElementsByClassName('a b');
    console.log(cls);

• 參數是元素的類別名稱。
• 傳回值是一個類別數組，沒有找到返回空數組

3.透過name屬性（getElementsByName）

// 透過name屬性查找，傳回一個NodeList(一個節點集合，有length屬性，可以透過索引號存取)
   var nm = document.getElementsByName('c');
    console.log(nm);

4.透過標籤名稱（getElementsByTagName）

// 透過標籤名稱找出元素傳回一個HTMLCollection
    document.getElementsByTagName('p');

• 參數是是取得元素的標籤名屬性，不區分大小寫。
• 傳回值是一個類別數組，沒有找到返回空數組

5.透過選擇器取得一個元素（querySelector）

document.querySelector('.animated')

• 參數是選擇器，如：”p .className”。
• 傳回單一node，如果有多個符合元素就傳回第一個

6.透過選擇器取得一組元素（querySelectorAll）

document.querySelector('.animated')

• 傳回值是一個類別陣列

取得節點

在文件物件模型(DOM ) 中，每個節點都是一個物件。 DOM 節點有三個重要的屬性

1. nodeName : 節點的名稱

2. nodeValue ：節點的值

3. nodeType ：節點的型

別一、nodeName 屬性: 節點的名稱，是唯讀的。

• 元素節點的nodeName 與標籤名稱相同
• 屬性節點的nodeName 是屬性的名稱
• 文字節點的nodeName 永遠是#text
• 文檔節點的nodeName 永遠是#document

二、nodeValue 屬性：節點的值

• 元素節點的nodeValue 是undefined 或null
• 文字節點的nodeValue 是文字本身
• 屬性節點的nodeValue 是屬性的值

三、nodeType 屬性: 節點的型別，是唯讀的。以下常用的幾種結點類型:

• 元素類型節點類型
• 元素1
• 屬性2
• 文字3 空格也是傳回3
• 註解8
• 文件9

建立節點：

1.建立節點:createElement('')

// 建立元素，只是建立出來並未加入html中，需要與appendChild 配合使用var elem = document.createElement('p');
    elem.id = 'test';
    elem.style = 'color: red';
    elem.innerHTML = '我是新建立的節點';
    document.body.appendChild(elem);

2.插入節點:appendChild ()

• 用法是： parent.appendChild(child)
• 會將child節點加入到parent裡的最後面
• 如果子節點原本就存在，會移除原節點，新增節點到最後，但事件會保留

var oNewp=document.createElement("p");
      var oText=document.createTextNode("World Hello");
      oNewp.appendChild(oText);

2-1.插入節點：insertBefore()

• 用法是parent.insertBefore(newNode,refNode);

var oOldp=document.body.getElementsByTagName("p")[0];
      document.body.insertBefore(oNewp,oOldp);

刪除節點

1.刪除節點：removeChild

• 用法是：parent.removeChild(child)
• 如果刪除的不是父元素的子節點會報錯

var op=document.body.getElementsByTagName("p ")[0];
         op.parentNode.removeChild(op);

克隆節點

1.克隆節點：parent.cloneNode() false 或true

• 克隆節點（需要接受一個參數來表示是否複製元素）

// 克隆節點（需要接受一個參數來表示是否複製元素）
    var form = document.getElementById('test');
    var clone = form.cloneNode(true);
    clone.id = 'test2';
    document.body.appendChild(clone);

替換節點

1.替換節點方法node.replace(new,old)

var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);

文檔碎片框

• 作用：當向document中添加大量的節點時,如果逐個添加將會十分緩慢,這時可以使用文檔碎片一次性添加到document中
• 語法：document. createDocumentFragment()；
• 承載節點

(function()
    {
        var start = Date.now();
        var str = '', li;
        var ul = document.getElementById('ul');
        var fragment = document.createDocumentFragment();
        for(var i=0; i<10000; i++)
        {
            li = document.createElement('li');
            li.textContent = '第'+i+'個子節點';
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        console.log('耗時：'+(Date.now()-start)+'毫秒'); // 63毫秒})();

【相關推薦：javascript影片教學、web前端】

以上就是JavaScript知識點整理之獲取元素和節點的詳細內容，更多請關注源碼網其它相關文章！