JS DOM节点：
在JS DOM中节点的关系被定义为节点的属性：
通常有以下几种节点之间的关系：
（这里的关系是所有浏览器都支持的）
- parentNode 父节点
- childNodes 子节点
- firstChild 父节点里的第一个子节点
- lastChild 父节点里的最后一个子节点
- nextSibling 与子节点并列的下一个兄弟节点
- previousSibling 与子节点并列的上一个兄弟节点
火狐与谷歌支持而ie8不支持的节点关系有：
previousElementSibling
nextElementSibling
firstElementChild
lastElementChild
在实际工作中，我们可以对这些ie8不支持，但是谷歌与火狐都支持的节点属性进行封装，使他们能够在各个浏览器中都能够兼容。
4个封装实例：
/** * 获得当前对象的上一个标签元素 * @param obj * @returns {*} */ function getPreviousSibling(obj){ if(obj.previousElementSibling){ // previousElementSibling能够直接获得上一个兄弟标签节点 return obj.previousElementSibling; }else { var node = obj.previousSibling;//是所有的浏览器都支持的，但是得判断节点类型，previousSibling不能直接获得类型为标签的元素，所以需要判断它的节点类型。 while(node&&node.nodeType!=1){ //判断节点上一个节点是否存在与节点的类型是否是标签类型，如果不是就使用while循环继续循环判断节点直到获得为止 node = node.previousSibling; } return node; //将找到的标签节点返回 } } /** * 获取当前元素的兄弟标签节点的函数 * @param obj * @returns {*} */ function getNextSibling(obj){ if(obj.nextElementSibling){ // 火狐谷歌都支持的，只会获得标签兄弟节点，IE8不支持 return obj.nextElementSibling; }else { var node = obj.nextSibling;// nextSibling是所有的浏览器都会支持的，但是会获得文本节点，IE8及之前的浏览器会忽略空白文本节点 while(node&&node.nodeType!=1){ node = node.nextSibling; } return node; } } /** * 获得兼容性的当前对象的第一个子标签节点 * @param obj * @returns {*} */ function getFirstChild(obj){ if(obj.firstElementChild){ return obj.firstElementChild;//将获取到的第一个子节点元素返回 }else { var node = obj.firstChild;//获得当前对象的第一个子节点，但是这个节点有可能是文本节点 while(node&&node.nodeType!=1){ node = node.nextSibling; } return node; } } /** * 获得当前对象的最后一个子标签节点 * @param obj * @returns {*} */ function getLastChild(obj){ if(obj.lastElementChild){ return obj.lastElementChild; }else { var node = obj.lastChild; while(node&&node.nodeType!=1){ node = node.previousSibling;//当前对象的上一个兄弟姊妹节点 } return node; } }
克隆节点：
cloneNode(true) 这种情况是表示克隆节点的所有内容（标签+标签里的内容）；
cloneNode(false) 这种情况是仅仅表示克隆了节点的标签；
例：
<body> <ul id="list"> <li>111111</li> <li>222222</li> <li id="li3">333333</li> <li>444444</li> </ul> <script> var ul = document.getElementById("list"); var li = document.getElementById("li3"); console.log(li.cloneNode(false)); //如果是False的话，仅仅是相当于复制(克隆)了一个标签 console.log(li.cloneNode(true));// 将li标签原样克隆，包含里面的一切信息，包括子节点 console.log(ul.cloneNode(false)); console.log(ul.cloneNode(true)); // 参数为True的时候，是深度克隆，克隆当前对象的一切子节点 // 参数为false的时候，是浅克隆，只会克隆标签，不包含文本信息 </script>
Dom中Style常用的一些属性：
display(none/block):控制元素的显示，不占据原来在标准流中的位置；
visibility(visible/hidden):控制元素的显示，占据原来在标准流之中的位置
backgroundColor: 控制元素的背景颜色
backgroundImage: 控制元素背景图片的路径
color: 控制前景颜色
控制元素的宽度
height:控制元素的高度
border:控制边框的属性
position:控制元素使用何种定位
left/top:控制元素的定位之后的偏移（注意最后不要忘记带上单位px）
box.style.position="absolute";
box.style.left="200px";
zIndex:控制元素的层级（案例：许愿墙点击哪个卡片哪个在最上面显示）
filter:控制元素的透明度（ie8支持）
box.style.filter="alpha(opacity=30)";
而火狐与谷歌支持的是：
box.style.backgroundColor="rgba(120,120,120,.3)";
补充：下拉列表中<option></option>的selected属性
selected 属性可设置或返回选项的 selected 属性的值。
该属性设置选项的当前状态，如果为 true，则该选项被选中。该属性的初始值来自 <option> 的 selected 属性。
抽奖案例： <body> <select name="" id="sel"> <option value="">一等奖</option> <option value="">二等奖</option> <option value="">三等奖</option> <option value="">四等奖</option> <option value="">五等奖</option> <option value="">六等奖</option> <option value="">七等奖</option> <option value="">八等奖</option> <option value="">九等奖</option> </select> <input type="button" value="抽奖" id="btn"/> <script> var sel=document.getElementById("sel"); var options=sel.children; var btn=document.getElementById("btn"); btn.onclick=function(){ var index=Math.floor(Math.random()*options.length); options[index].selected=true; } </script>
在 DOM 中，属性也是节点。与元素节点不同，属性节点拥有文本值。
获取属性的值的方法，就是获取它的文本值。
getAttribute() 方法返回属性的值。
getAttributeNode() 方法返回属性节点。
setAttribute() 方法用于改变属性的值或创建新属性。
removeAttribute() 方法删除指定属性。
createElement() 方法创建新的元素节点;
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
removeChild() 方法删除指定节点。当一个节点被删除时，其所有子节点也会被删除。
insertBefore() 方法用于在指定的子节点之前插入节点。在被添加的节点的位置很重要时，此方法很有用。
replaceChild() 方法用其他节点替换某个子节点。如成功，该方法返回被替换的节点，如失败，则返回 null。