HTML文档在浏览器解析后，会成为一种树形结构，我们需要改变它的结构，就需要通过js来对dom节点进行操作。dom节点（Node）通常对应的是一个标题，文本，或者html属性，都有一个nodeType来标示他的类型：

<script>
   	console.log(document.getElementsByTagName('meta')[0].nodeType);//输出1，代表页面中第一个meta是元素类型
   </script>

JS动态创建Dom

createElement()方法可创建元素节点，此方法可返回一个 Element 对象。例如我们需要在body下创建一个按钮元素button，方法如下：

<script type="text/javascript"> 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "创建一个按钮";  
   document.body.appendChild(input);  
 </script>

Dom的获取

1.直接获取

通过id来获取，由于ID在HTML文档中是唯一的，可以直接定位唯一的一个DOM节点。

var test=document.getElementById('id')

通过节点名来获取，由于文档中存在多个名称，所以返回的是一组节点。

var test= document.getElementsByTagName('div') 

通过类名来获取。

var test= document.getElementsByClassName('class') //返回一组有该类的所有节点。

var test=document.querySelector(".class")//返回当前文档中第一个类名为 " class  " 的节点 ，里面参数也可以用id如#id。

var test= document.querySelectorAll("div.class, div.other")//返回一组文档中div的class为"class"或者 "other"的节点。

注意：IE8及以下版本是不支持querySelector和querySelectorAll的。

2.通过父节点获取子节点

为了精确地选择DOM，我们可以先定位父节点，再从父节点开始选择子节点，以缩小范围。

var ch = test.children;//获取节点test下的所有直属的节点集合

var first = test.firstElementChild; // 获取节点test下第一个节点

var last = test.lastElementChild;//获取节点test下第一个节点

3.通过获取父节点,和兄弟节点

var parent =  test.parentElement;//获取父节点

var next =  test.nextElementSibling; //获取下一个兄弟节点

var pre =  test.previousElementSibling;//上一个兄弟节点

4.注意

平时我们还可能会看到用这些来获取，比如parentNode,childNodes,firstChild,lastChild,nextSibling,previousSibling等，需要注意的是：它们返回元素集合，包括元素节点，属性节点，文本节点。而我们上面主要是获取元素节点。

Dom的修改、删除

<div id="parent">
    <p>First</p>
    <p>Second</p>
</div>
<script>
 var parent = document.getElementById('parent');
 parent.removeChild(parent.children[0]);
 parent.removeChild(parent.children[1]); // 浏览器报错，parent.children[1]不是一个有效的节点。
</script>

var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

4.元素的属性的修改操作

修改元素的属性也是经常需要的操作。

var a = test.getAttribute('class'); //获取test元素的class属性

a.setAttribute('class', 'clname'); //把class属性值修改为clname

test.hasAttribute('class'); //判断test元素是否存在clas的属性

test.removeAttribute('class'); //移除test中的class属性    

链接: http://www.fly63.com/article/detial/66