節(jié)點類型主要有三種：元素節(jié)點，屬性節(jié)點和文本節(jié)點。
而對DOM的主要也就是圍繞元素節(jié)點和屬性節(jié)點的增刪改查。下面就分別從對元素節(jié)點的操作和對屬性節(jié)點的操作來介紹
查
在對DOM進行增刪改之前，首先要找到對應(yīng)的元素。具體的查找方法如下：
getElementByID() // 得到單個節(jié)點 getElementsByTagName() // 得到節(jié)點數(shù)組 NodeList getElementsByName() // 得到節(jié)點數(shù)組 NodeList |
同時還可以利用元素節(jié)點的屬性獲取它的父子節(jié)點和文本節(jié)點：
子節(jié)點:
Node.childNodes //獲取子節(jié)點列表NodeList; 注意換行在瀏覽器中被算作了text節(jié)點，如果用這種方式獲取節(jié)點列表，需要進行過濾Node.firstChild //返回第一個子節(jié)點Node.lastChild //返回最后一個子節(jié)點父節(jié)點:
Node.parentNode // 返回父節(jié)點Node.ownerDocument //返回祖先節(jié)點（整個document）同胞節(jié)點：Node.PReviousSibling // 返回前一個節(jié)點，如果沒有則返回nullNode.nextSibling // 返回后一個節(jié)點增
新增節(jié)點首先要創(chuàng)建節(jié)點，然后將新建的節(jié)點插入DOM中，所以下面分別介紹創(chuàng)建節(jié)點和插入節(jié)點的方法，復(fù)制節(jié)點的方法也在創(chuàng)建節(jié)點中進行介紹。
創(chuàng)建節(jié)點
| 1 | createElement() // 按照指定的標(biāo)簽名創(chuàng)建一個新的元素節(jié)點 |
創(chuàng)建代碼片段（為避免頻繁刷新DOM，可以先創(chuàng)造代碼片段，完成所有節(jié)點操作之后統(tǒng)一添加到DOM中）
| 1 | createDocumentFragment() |
復(fù)制節(jié)點
clonedNode = Node.cloneNode(boolean) // 只有一個參數(shù)，傳入一個布爾值，
true表示復(fù)制該節(jié)點下的所有子節(jié)點；false表示只復(fù)制該節(jié)點
插入節(jié)點
/*插入node*/parentNode.appendChild(childNode); // 將新節(jié)點追加到子節(jié)點列表的末尾parentNode.insertBefore(newNode, targetNode); //將newNode插入targetNode之前 /*插入html代碼*/node.insertAdjacentHTML('beforeBegin', html); //在該元素之前插入代碼node.insertAdjacentHTML('afterBegin', html); //在該元素的第一個子元素之前插入代碼node.insertAdjacentHTML('beforeEnd', html); //在該元素的最后一個子元素之后插入代碼node.insertAdjacentHTML('afterEnd', html); //在該元素之后插入代碼替換節(jié)點
parentNode.replace(newNode, targetNode); //使用newNode替換targetNode
移除節(jié)點
| 12 | parentNode.removeChild(childNode); // 移除目標(biāo)節(jié)點node.parentNode.removeChild(node); //在不清楚父節(jié)點的情況下使用 |
屬性節(jié)點
操作屬性節(jié)點，就是對DOM樣式進行增刪改查。對于行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式有不同的操作方法；各種方法獲得的樣式也有可讀可寫和只讀之分。
直接獲取CSS樣式
| 1 | node.style.color // 可讀可寫 |
Style本身的屬性和方法
| 123 | node.style.cssText //獲取node行內(nèi)樣式字符串node.style.length //獲取行內(nèi)樣式個數(shù)node.style.item(0) //獲取指定位置的樣式 |
獲取和修改元素樣式
HTML5為元素提供了一個新的屬性：classList 來實現(xiàn)對元素樣式表的增刪改查。操作如下：
node.classList.add(value); //為元素添加指定的類node.classList.contains(value); // 判斷元素是否含有指定的類，如果存在返回truenode.classList.remove(value); // 刪除指定的類node.classList.toggle(value); // 有就刪除，沒有就添加指定類修改DOM特性的方法
| 1234 | Node.getAttribute('id') // 獲取Node.setAttribute('id') // 設(shè)置Node.removeAttribute() // 移除Node.attributes // 獲取DOM全部特性 |
只讀方法
getComputedStyle是window的方法。它能夠獲取當(dāng)前元素所有最終使用的CSS屬性值，但是是只讀的。它有兩個參數(shù)，第一個為傳入的節(jié)點，第二個可以傳入:hover, :blur等獲取其偽類樣式，如果沒有則傳入null。
然而IE并不支持getComputedStyle方法，可以使用currentStyle來保持兼容性：
window.getComputedStyle ？ window.getComputedStyle(node,null) : node,currentStyle
新聞熱點
疑難解答
