javascriptDOM基礎和擴展

2017/06/19 來源：紅黑聯盟

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

一、前言

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

二、querSelector方法 和 querySelectorAll 方法。

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

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

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+）

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

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

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

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

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

DOM節點的增刪改查：

1.appendChild 向列表childList 尾部添加節點

2.insertBefore( newNode,position) 向列表指定位置插入節點（newNode新節點，position 插入的位置）

3.removeChild(,position) 刪除列表中指定位置的節點

4.replaceChild( newNode,position)替換列表指定位置的節點

5.cloneChild 克隆dom 節點

6. createElement 創建節點

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

• 我是a標籤
• 我是第三個Li
• 我是第四個Li
• 我是第五個Li

js

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

免責聲明：本文內容來源于紅黑聯盟，文章觀點不代表壹讀立場，如若侵犯到您的權益，或涉不實謠言，敬請向我們提出檢舉。