javascript DOM基礎和擴展

今天總結一些js 的DOM的一些知識。很簡單，也很基礎，但是我認爲很重要。

一、前言

我想很多人在學js時，都會經常用 getElementById() 和 getElementsByTagName() 但是今天我主要不是講這兩個，而是講一下其他的Dom 操作的方法。

二、querySelector()方法 和 querySelectorAll() 方法。

這兩個方法它可以去解析css選擇符。我們可以利用這兩個方法，通過css選擇符去查找我們想要的元素。（目前主流瀏覽器都支持）

1.querySelector() 方法獲取所選元素的第一個元素

<ul>
    <li class="one">
        <div>我是div</div>
    </li>
    <li class="two">
        <a href="">我是a標籤</a>
    </li>
    <li class="other">我是第三個Li</li>
    <li class="other">我是第四個Li</li>
    <li class="other">我是第五個Li</li>
</ul>

 var li = document.querySelector("ul>li");
 console.log(li) // 獲取類爲 one 的li元素

2.querySelectorAll() 方法接受的參數和querySelector()一樣，只不過它返回來的是所有被選擇的元素的集合（類數組）

例如：

var li = document.querySelectorAll("ul>li");
 console.log(li) // ul 元素下邊的所有li元素

如果這兩個元素傳入的選擇符不被css選擇符所支持，哪兒將會報錯。

 var li = document.getElementById("ul").querySelectorAll("li");
console.log(li) // 結果會返回 id 爲ul 下邊的所用 li 元素。

三、元素的遍歷

對於元素間的空格，Ie9及之前版本不會返回文本節點，但是其他所有瀏覽器都會返回文本節點，爲了彌補這一差異，而又保持DOM規範不變，w3c 又新定義了一株屬性。（IE9+）

1. childElementCount 返回子元素（不包括文本節點和註釋）的個數

2. firstElementChild 指向第一個子元素； firstChild 的元素版

3. lastElementChild 指向最後一個子元素； lastChild的元素版

4. previousElementSibling 指向前一個同輩元素；previousSibling 的元素版

5. nextElementSibling 指向後一個同輩元素； nextSibling 的元素版

DOM節點的增刪改查：
增加：
1.appendChild() 向列表childList 尾部添加節點
2.insertBefore( newNode,position) 向列表指定位置插入節點（newNode新節點，position 插入的位置）
3.removeChild(,position) 刪除列表中指定位置的節點
4.replaceChild( newNode,position)替換列表指定位置的節點
5.cloneChild() 克隆dom 節點
6. createElement() 創建節點
7. offsetParent() 得到父元素

其它：
1. innerText 獲取文本節點，不包括標籤，（可讀寫）
2. innerHTML 獲取元素的所有子文本 （可讀寫）
3. getAttribute() 獲取元素的屬性
4. clientWidth 和 clientHeight 獲取元素可視區域的大小 （寬+內）
5. offsetWidth 和 offsetHeight 獲取元素的實際大小 （寬+內+邊+外）
6. clientLeft he clientTop 獲取元素設置了的左邊框和上邊框的大小
7. offsetLeft 和 offsetTop 獲取元素相對父元素的位置（最好設置了position,否則不同瀏覽器解析不同）
8. getBoundingClientRect() 返回一個矩形對象，包含元素的 left 、top、right、 bottom 的距離，IE 中默認座標（2,2）
9. getComputedStyle(“元素”，“僞類（或是null）”),第二個參數在現代瀏覽器中可以省略，獲取元素所有樣式（IE9+），在IE中使用 currentStyle()
10. getPropertyValue(“樣式”) 獲取樣式聲明對象上的屬性值，（不支持駝峯法，IE9+）,例如：

getComputedStyle(element, null).getPropertyValue("float");

11 . scrollTop 和 scrollLeft 獲取滾動條的位置（可讀寫）

DOM操作節點中的文本：

1.appendData(text) 將text添加到節點的末尾

2.deleteData(offset，count) 從offset 指定的位置開始刪除count個字符

3.insertData(offset,text) 在offset指定的位置插入text

4.replaceData(offest,count,text) 用text替換從offset指定的位置開始到offset+count爲止處的文本

5.splitText（offset）從offset指定的位置將當前文本節點分成兩個文本節點

6.substringData(offset,count) 提取從coffse 指定的位置開始都offset+count爲止的字符串。

7.createTextNode() 創建文本節點

四、HTML5 新增的部分Dom操作

1.getElementsByClassName() 方法 （ie9+）
該方法接收一個參數，即一個包含一或多個類名的字符串，返回的都是帶有nodeList 的集合。例如：
還是上面的HTML

 var dom = document.getElementsByClassName("other");
 console.log(dom) // 是一個集合，包含類名爲other的所有元素

同樣我們也可以指定獲取元素的範圍

var dom = document.getElementById(""ul).getElementsByClassName("two");

 console.log(dom) // 獲取id爲ul元素下邊的所有類名爲two的元素

注意：使用這個元素可以方便的爲帶有某些類的元素添加事件處理程序，從而不必侷限於使用id或標籤名。不過別忘了，因爲它返回的對象是NodeList ，所以使用這個方法以及其他返回NodeList 的DOM方法都具有相同的性能問題。

2. classlist 屬性 (目前firefox3.6+ 和 Chrome)
該屬性可以很方便的添加，刪除，更改元素的類名，該元素有一下幾種方法；
① add(value) 將給定的字符串添加到列表中，如果值已經存在，就不添加了

② contains(value) 表示列表中是否存在給定的值，如果存在則返回ture，否則返回false

③ remove(value) 表示從列表中刪除給定的字符串

④toggle(value) 如果列表中已經存在給定的值，刪除它；如果列表中沒有給定的值，添加它。

這裏我只提供一個簡單的例子：
css:

    .add{ display:none}

html

<ul id="ul">
    <li class="one">
        <button>我是div</button>
    </li>
    <li class="two">
    <a href="">我是a標籤</a>
    </li>
    <li class="other">我是第三個Li</li>
    <li class="other">我是第四個Li</li>
    <li class="other">我是第五個Li</li>
</ul>

js

var dom = document.querySelector(".two");
var bol = true;
document.querySelector(".one").onclick = function(){
   dom.classList.toggle("add");
   console.log(dom)
}