原生js獲取節點

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

    // 通過類名查找元素，多個類名用空格分隔,得到一個HTMLCollection(一個元素集合，有length屬性，可以通過索引號訪問里面的某一個元素)
    var cls = document.getElementsByClassName('a b');
    console.log(cls);

    // 通過標簽名查找元素 返回一個HTMLCollection
    document.getElementsByTagName('div');

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

    // 獲取所有form標簽(得到一個HTMLCollection集合）
    var form = document.forms;

  // html5新加標簽（ie8+）
    // document.querySelector(); //  返回單個node，如果有多個匹配元素就返回第一個
    // document.querySelectorAll(); // 返回一個nodeList集合


// 2 創建節點

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

    // 創建文本節點 createTextNode
    var txt = document.createTextNode('我是文本節點');
    document.body.appendChild(txt);

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

    //文檔碎片的方式（提升性能）
    (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毫秒
    })();

// 3 節點修改API
    //節點修改APi有兩個特點
    // 1 不論新增還是替換節點，如果原本就在頁面上，就會被替換
    // 2 修改之后節點本身綁定的事件不會小時

    // 1 appendChild ()
    // 用法是： parent.appendChild(child)
    // 會將child節點添加到parent里的最后面，如果子節點原本就存在，會移除原節點，添加新節點
    // 到最后，但是事件會保留

    // 2 insertBefore()
    // 用法是 parent.insertBefore(newNode,refNode);
    // refNode 是必須傳的 不傳會報錯
    // 如果 refNode 是undefined 和null 就會將新節點傳入到parent節點的最后

    // 3 removeChild()
    // 用法是：parent.removeChild(child)
    // 如果刪除的不是父元素的子節點會報錯
    // var deleted = parent.removeChild(child)
    // deleted 可以繼續引用節點 ，被刪除節點依然存在與內存中

    // 4 replaceChild()
    // 用法是：parent.replaceChild(newChild, oldChild);

// 4 節點的關系APi
    // 1 父關系API
       //  parentNode 父節點
       //  parentElement父元素

    // 2 子關系API
        // children 子元素
        // childNodes 子節點
        // firstElementChild 第一個子元素
        // firstChild 第一個子節點
        // lastElementChild 最后一個子元素
        // lastChild 最后一個子節點

    // 3 兄弟關系的API
        // previousSibling 節點的上一個兄弟節點
        // previousElementSibling  節點的上一個兄弟元素（ie9以下不支持）
        // nextSibling  節點的下一個兄弟節點
        // nextElementSibling 節點的下一個兄弟元素（ie9以下不支持）


// 5 節點屬性API
    // setAttribute(name,value) 給元素設置屬性
    // getAttribute(name)   獲取元素屬性

// 6 直接修改元素的樣式
    elem.style.color = 'red';
    elem.style.setProperty('font-size', '16px');
    elem.style.removeProperty('color');

// 7 動態添加樣式
    var style = document.createElement('style');
    style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
    document.head.appendChild(style);

// 8 window.getComputedStyle

// 用法是：var style = window.getComputedStyle(element[, pseudoElt]);
// element:目標元素的DOM對象
 // pseudoElt:指明要匹配的偽元素,對於普通元素必須指定為null(或省略)(or not specified翻譯     // 成省略不知道有沒有問題,不過測試結果表明對於普通元素確實可以省略該參數)

本文章摘自：http://blog.csdn.net/dl2295630178/article/details/70231056