var listElementNode = element.querySelector('selector'); var listElementsNodes = element.querySelectorAll('selector'); var sampleSingleNode = element.querySelector('#className'); var sampleAllNodes = element.querySelectorAll('#className');
NOTE: IE9 一下不支持 querySelector 与 querySelectorAll
创建节点
创建节点 -> 设置属性 -> 插入节点
var element = document.createElement('tagName');
修改节点
textContent
获取或设置节点以及其后代节点的文本内容（对于节点中的所有文本内容）。
element.textContent; // 获取 element.textContent = 'New Content';
NOTE：不支持 IE 9 及其一下版本。
innerText （不符合 W3C 规范）
获取或设置节点以及节点后代的文本内容。其作用于 textContent 几乎一致。
element.innerText;
NOTE：不符合 W3C 规范，不支持 FireFox 浏览器。
FireFox 兼容方案
if (!('innerText' in document.body)) { HTMLElement.prototype.__defineGetter__('innerText', function(){ return this.textContent; }); HTMLElement.prototype.__defineSetter__('innerText', function(s) { return this.textContent = s; }); }
插入节点
appendChild
在指定的元素内追加一个元素节点。
var aChild = element.appendChild(aChild);
insertBefore
在指定元素的指定节点前插入指定的元素。
var aChild = element.insertBefore(aChild, referenceChild);
删除节点
删除指定的节点的子元素节点。
var child = element.removeChild(child);
innerHTML
获取或设置指定节点之中所有的 HTML 内容。替换之前内部所有的内容并创建全新的一批节点（去除之前添加的事件和样式）。innerHTML 不检查内容，直接运行并替换原先的内容。
NOTE：只建议在创建全新的节点时使用。不可在用户可控的情况下使用。
var elementsHTML = element.innerHTML;
存在的问题+
低版本 IE 存在内存泄露
安全问题（用户可以在名称中运行脚本代码）
PS: appendChild() , insertBefore()插入节点需注意的问题
使用appendChild()和insertBefore()插入节点都会返回给插入的节点，
//由于这两种方法操作的都是某个节点的子节点，所以必须现取得父节点，代码中 someNode 表示父节点 //使用appendChild()方法插入节点 var returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNode) //true //使用insertBefore()方法插入节点 var returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNode) //true
值得注意的是，如果这两种方法插入的节点原本已经存在与文档树中，那么该节点将会被移动到新的位置，而不是被复制。
<div> <div>adscasdjk</div> <div>adscasdjk</div> </div> <script type="text/javascript"> var t = document.getElementById("test"); var a = document.getElementById('a'); //var tt = a.cloneNode(true); t.appendChild(a); </script>
在这段代码中，页面输出的结果和没有Javascript时是一样的，元素并没有被复制，由于元素本来就在最后一个位置，所以就和没有操作一样。如果把id为test的元素的两个子元素点换位置，就可以在firbug中看到这两个div已经被调换了位置。
如果我们希望把id为a的元素复制一个，然后添加到文档中，那么必须使被复制的元素现脱离文档流。这样被添加复制的节点被添加到文档中之后就不会影响到文档流中原本的节点。即我们可以把复制的元素放到文档的任何地方，而不影响被复制的元素。下面使用了cloneNode()方法，实现节点的深度复制，使用这种方法复制的节点会脱离文档流。当然，我不建议使用这种方法复制具有id属性的元素。因为在文档中id值是唯一的。