jQuery提供的方法

　　上来就把jQuery提供的方法摆在这里是不是有点不好呀，不过，我们从jQuery的方法名称上就能知道这些方法是干嘛的了。

　　看完所有的方法之后，我们可以发现：children()只能获取直接的子节点；而find能获取所有的子孙节点，当然也包括直接的子节点。

js提供的方法

1 获取元素节点// 通过id的方式( 通过id查找元素，大小写敏感，如果有多个id只找到第一个)document.getElementById('div1');// 通过类名查找元素，多个类名用空格分隔,得到一个HTMLCollection(一个元素集合，有length属性，可以通过索引号访问里面的某一个元素)var cls = document.getElementsByClassName('a b');console.log(cls);// 通过标签名查找元素 返回一个HTMLCollectiondocument.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);// 创建文本节点 createTextNodevar 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(或省略)