这篇文章中我们将介绍一些关于Javascript DOM元素管理方面的知识。它包括DOM元素的创建，插入，移除，修改，添加样式，访问等。
这里列出的javascript DOM元素管理的方法都可以在Mozilla Developer Network上找到，这里将他们列在一个页面中，方便查找。
创建一个DOM元素
MDN Reference - Creation of a DOM Element
这个方法可以在HTML文档中创建一个特别的HTML元素一个HTMLUnknownElement元素。
var element = document.createElement(tagName);
element是被创建的DOM元素对象。tagName是一个字符串，它代表要创建元素的类型。被创建元素的节点名称通过tagName来初始化。
创建元素并添加到DOM中
MDN Reference - Addition of Created Element to DOM
在指定的父元素节点的子节点列表的末尾添加一个新的节点元素。如果这个节点已经存在，会被从当前父元素中移除，然后在添加到父元素节点中。
var child = element.appendChild(child);
element是父元素。child是要添加的节点，也是返回的对象。
为HTML元素设置样式
MDN Reference - Styling an HTML Element
HTMLElement.style属性是一个代表元素样式属性的对象。要获取一个元素的所有CSS属性，你可以使用window.getComputedStyle()方法。
element.style.color = "#ff3300";
element.style.marginTop = "30px";
element.style.paddingBottom = "30px";
获取或设置HTML元素
MDN Reference - Getting and Setting the HTML Elements
innerHTML属性可以获取或设置HTML元素的内容。
// get the HTML of "element"
var content = element.innerHTML;
// set the HTML of "otherElement"
otherElement.innterHTML = content;
获取或设置CSS名称
MDN Reference - Getting and Setting the Class Name
className属性可以获取或设置指定元素的CSS属性名称。
// get the class name of "element"
var cName = element.className;
// set the class name of "otherElement"
otherElement.className = cName;
获取或设置ID
MDN Reference - Getting and Setting the ID
id属性可以设置或获取元素的ID标识符。
// get the id of "element"
var idStr = element.id;
// set the id of "otherElement"
otherElement.id = idStr;
通过ID访问DOM元素
MDN Reference - Accessing by ID
通过ID返回一个元素的引用。
element = document.getElementById(id);
通过Class名称访问DOM元素
MDN Reference - Accessing by Class Names
返回所有带有相同class名称的元素引用的数组。IE8级以下的浏览器不支持这个方法，使用时要特别注意。
elements = document.getElementsByClassName(names); // or:
elements = rootElement.getElementsByClassName(names);
elements是找到元素的HTMLCollection。names是一组要匹配的class名称，各个class之间使用空白符隔开。getElementsByClassName可以被任何的元素调用，不仅仅是document元素。
通过标签名称访问DOM元素
MDN Reference - Accessing by Tag Name
通过标签名称返回匹配元素的HTMLCollection集合。它会搜索这个文档，包括root节点。
var elements = document.getElementsByTagName(name);
elements是按顺序出现在文档树中的节点元素的实时HTMLCollection。name是一个字符串，代表标签的名称。“*”代表所有的元素。
通过选择器查找第一个元素
MDN Reference - Accessing First Found Selector
返回文档中第一个匹配的元素（使用深度优先和先序遍历的原则），支持IE8以上的浏览器。
element = document.querySelector(selectors);
element是一个元素对象。selectors是一个或多个CSS选择器的字符串，用逗号隔开。
下面的例子中返回带有.foo或.bar class类的第一个元素。
element = document.querySelector('.foo,.bar');
查找所有满足条件的元素
MDN Reference - Accessing an Array of Selectors
返回所有满足条件的元素，结果是个nodeList集合（使用深度优先和先序遍历的原则）。支持IE8以上的浏览器。
elementList = document.querySelectorAll(selectors);
elementList是一个非实时的NodeList元素对象。selectors是一个或多个CSS选择器的字符串，用逗号隔开。
下面的例子中返回文档中所有带.note或.alert的div元素。
var matches = document.querySelectorAll("div.note, div.alert");
关于实时和非实时的区别
什么是实时（live）和非实时（non-live）的返回结果？看下面的例子：
<div id="container">
<div></div>
<div></div>
</div>
//首先选取页面中id为container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)//结果为2
//然后通过代码为其添加一个子元素
container.appendChild(document.createElement('div'));
//这个元素不但添加到页面了，这里的变量container也自动更新了
console.log(container.childNodes.length)//结果为3
通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById返回的便是实时结果，上面对其添加一个子元素后，再次获取所有子元素个数，已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。
获取给定元素的子元素
MDN Reference - Children of a Given Element
childNodes可以返回给定元素的子元素集合。
var ndList = elementNodeReference.childNodes;
获取给定元素的下一个兄弟元素
MDN Reference - Next Sibling of a Given Element
nextSibling可以返回紧跟着指定元素的兄弟元素。如果指定元素是最后一个元素，则返回null。
nextNode = node.nextSibling
获取指定对象的子元素
MDN Reference - Child Elements of a Given Object
ParentNode.children只读属性返回给定对象的一个实时子元素HTMLCollection。它返回的是一个对象集合，要从这些对象中获取数据，必须使用它们的属性，例如要获取名称使用：elementNodeReference.children[1].nodeName。
var elList = elementNodeReference.children;
获取指定元素的紧随子元素
MDN Reference - Element Immediately Following Specified Element
ChildNode.nextElementSibling自动属性返回指定元素的紧随子元素，如果指定元素为最后一个子元素，则返回null。
var nextNode = elementNodeReference.nextElementSibling;
