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

【相關推薦：、】

獲取元素

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

1.通過ID獲取（getElementById）

// 1 獲取元素節點
    // 通過id的方式( 通過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知識點整理之獲取元素和節點的詳細內容，更多請關注TW511.COM其它相關文章！