javascript常用api总结

  <div id="div1">div1</div>
    <div id="div2">div2
        <span id="span1">span1</span>
        <span id="span2">span2</span>
    </div>
    <div id="div3" class="a b" name="c">div3
        <b id="b1" class="a b" name="c">b1</b>
        <b id="b2">b2</b>
    </div>
    <ul id="ul"></ul>

 1 获取元素节点
     // 1 通过id的方式( 通过id查找元素，大小写敏感，如果有多个id只找到第一个)

 document.getElementById('div1');

     // 2 通过类名查找元素，多个类名用空格分隔,得到一个HTMLCollection(一个元素集合，有length属性，可以通过索引号访问里面的某一个元素)

var cls = document.getElementsByClassName('a b');
        console.log(cls);

   // 3 通过标签名查找元素 返回一个HTMLCollection

  document.getElementsByTagName('div');

   // 4 通过name属性查找，返回一个NodeList(一个节点集合，有length属性，可以通过索引号访问)

 var nm =  document.getElementsByName('c');
        console.log(nm);

   // 5 获取所有form标签(得到一个HTMLCollection集合）
    var form = document.forms;

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