原生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翻译     // 成省略不知道有没有问题,不过测试结果表明对于普通元素确实可以省略该参数)