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: 控制前景顏色
width:控制元素的寬度
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。