DOM 操作

evenyao發表於2018-07-28

DOM，文件物件模型。是HTML和XML文件的程式設計介面。它給文件（結構樹）提供了一個結構化的表述並且定義了一種方式—程式可以對結構樹進行訪問，以改變文件的結構，樣式和內容。

DOM 提供了一種表述形式將文件作為一個結構化的節點組以及包含屬性和方法的物件。從本質上說，它將web 頁面和指令碼或程式語言連線起來了。

 

要改變頁面的某個東西，JavaScript就需要獲得對HTML文件中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行新增、移動、改變或移除的方法和屬性，都是通過DOM來獲得的

document 物件

每個載入瀏覽器的HTML文件都會成為document物件。document物件包含了文件的基本資訊，我們可以通過JavaScript對HTML頁面中的所有元素進行訪問、修改。

document物件常用屬性

document物件有很多屬性來描述文件資訊，介紹幾個常用的

    document.doctype
    document.title
    document.characterSet
    document.head
    document.body
    document.images

document.location

document.location 也可直接使用 location

document.location === location //true
document.location === window.location  //true

location屬性返回一個只讀物件，提供了當前文件的URL資訊

// 假定當前網址為http://user:passwd@www.example.com:4097/path/a.html?x=111#part1

document.location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"
document.location.host // "www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "passed"

// 跳轉到另一個網址
document.location.assign(`http://www.google.com`)
// 優先從伺服器重新載入
document.location.reload(true)
// 優先從本地快取重新載入（預設值）
document.location.reload(false)
// 跳轉到另一個網址，但當前文件不保留在history物件中，
// 即無法用後退按鈕，回到當前文件
document.location.assign(`http://www.google.com`)
// 將location物件轉為字串，等價於document.location.href
document.location.toString()

雖然location屬性返回的物件是隻讀的，但是可以將URL賦值給這個屬性，網頁就會自動跳轉到指定網址。

document.location = `http://www.example.com`;
// 等價於
document.location.href = `http://www.example.com`;

 

document.open() 與 document.close()

document.open方法用於新建一個文件，供write方法寫入內容。它實際上等於清除當前文件，重新寫入內容

document.close方法用於關閉open方法所新建的文件。一旦關閉，write方法就無法寫入內容了。

document.write()

document.write方法用於向當前文件寫入內容。只要當前文件還沒有用close方法關閉，它所寫入的內容就會追加在已有內容的後面。

document.open();
document.write("hello");
document.write("world");
document.close();

  1. 如果頁面已經渲染完成再呼叫write方法，它會先呼叫open方法，擦除當前文件所有內容，然後再寫入。

  2. 如果在頁面渲染過程中呼叫write方法，並不會呼叫open方法。

需要注意的是，雖然呼叫close方法之後，無法再用write方法寫入內容，但這時當前頁面的其他DOM節點還是會繼續載入。

除了某些特殊情況，應該儘量避免使用document.write這個方法。

Element

除了document物件，在DOM中最常用的就是Element物件了，Element物件表示HTML元素。

Element 物件可以擁有型別為元素節點、文字節點、註釋節點的子節點，DOM提供了一系列的方法可以進行元素的增、刪、改、查操作

Element有幾個重要屬性

  • nodeName：元素標籤名，還有個類似的tagName
  • nodeType：元素型別
  • className：類名
  • id：元素id
  • children：子元素列表（HTMLCollection）
  • childNodes：子元素列表（NodeList）
  • firstChild：第一個子元素
  • lastChild：最後一個子元素
  • nextSibling：下一個兄弟元素
  • previousSibling：上一個兄弟元素
  • parentNode、parentElement：父元素

 

查詢元素 (ES3方法)

getElementById()

getElementById方法返回匹配指定ID屬性的元素節點。如果沒有發現匹配的節點，則返回null。這也是獲取一個元素最快的方法

var elem = document.getElementById("test");

 

getElementsByClassName()

getElementsByClassName方法返回一個類似陣列的物件（HTMLCollection型別的物件），包括了所有class名字元合指定條件的元素（搜尋範圍包括本身），元素的變化實時反映在返回結果中。這個方法不僅可以在document物件上呼叫，也可以在任何元素節點上呼叫。

var elements = document.getElementsByClassName(`tab`);

getElementsByClassName方法的引數，可以是多個空格分隔的class名字，返回同時具有這些節點的元素。

document.getElementsByClassName(`red test`);

 

getElementsByTagName()

getElementsByTagName方法返回所有指定標籤的元素（搜尋範圍包括本身）。返回值是一個HTMLCollection物件，也就是說，搜尋結果是一個動態集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document物件上呼叫，也可以在任何元素節點上呼叫。

var paras = document.getElementsByTagName("p");

上面程式碼返回當前文件的所有p元素節點。注意，getElementsByTagName方法會將引數轉為小寫後，再進行搜尋。

getElementsByName()

getElementsByName方法用於選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的物件，不會實時反映元素的變化。

// 假定有一個表單是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"

注意，在IE瀏覽器使用這個方法，會將沒有name屬性、但有同名id屬性的元素也返回，所以name和id屬性最好設為不一樣的值。

查詢元素 更好的方法

querySelector()

querySelector方法返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector(`#myParent > [ng-click]`);

querySelector方法無法選中CSS偽元素。

querySelectorAll()

querySelectorAll方法返回匹配指定的CSS選擇器的所有節點，返回的是NodeList型別的物件。NodeList物件不是動態集合，所以元素節點的變化無法實時反映在返回結果中。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的引數，可以是逗號分隔的多個CSS選擇器，返回所有匹配其中一個選擇器的元素。

var matches = document.querySelectorAll("div.note, div.alert");

上面程式碼返回class屬性是note或alert的div元素。

建立元素

createElement()

createElement方法用來生成HTML元素節點。

var newDiv = document.createElement("div");

createElement方法的引數為元素的標籤名，即元素節點的tagName屬性。如果傳入大寫的標籤名，會被轉為小寫。如果引數帶有尖括號（即<和>）或者是null，會報錯。

createTextNode()

createTextNode方法用來生成文字節點，引數為所要生成的文字節點的內容。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

上面程式碼新建一個div節點和一個文字節點

newDiv.append(newContent);  //即把上面的Hello加入到div中

 

createDocumentFragment()

createDocumentFragment方法生成一個DocumentFragment物件。

var docFragment = document.createDocumentFragment();

DocumentFragment物件是一個存在於記憶體的DOM片段，但是不屬於當前文件，常常用來生成較複雜的DOM結構，然後插入當前文件。這樣做的好處在於，因為DocumentFragment不屬於當前文件，對它的任何改動，都不會引發網頁的重新渲染，比直接修改當前文件的DOM有更好的效能表現。

更通俗的說，createDocumentFragment()就是開闢了一塊第三方區域，等所有DOM的改動都在這片區域完成操作之後，再統一的插入當前文件。通過這種方法達到降低渲染次數的目的，從而改善效能表現。

 

增添/修改 元素

appendChild()

在元素末尾新增元素

var fatherDiv = document.querySelector(`#father`); //父級id為fahter的div
var newDiv = document.createElement("div"); //新增的div
var newContent = document.createTextNode("Hello");  //新增div中的內容
newDiv.append(newContent);  //將內容新增到div中
fatherDiv.appendChild(newDiv); //將新增的div放置到id為father的div的最後

 

insertBefore()

在某個元素之前插入元素

var fatherDiv = document.querySelector(`#father`);
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.append(newContent);
fatherDiv.insertBefore(newDiv,fatherDiv.chlidren[0]);  //放到最前

 

replaceChild()

replaceChild()接受兩個引數：要插入的元素和要替換的元素

newDiv.replaceChild(newElement, oldElement);

 

刪除元素

刪除元素使用removeChild()方法即可

parentNode.removeChild(childNode);

 

clone元素

cloneNode()方法用於克隆元素，方法有一個布林值引數，傳入true的時候會深複製，也就是會複製元素及其子元素（IE還會複製其事件），false的時候只複製元素本身

node.cloneNode(true);

 

屬性操作

getAttribute()

getAttribute()用於獲取元素的attribute值

node.getAttribute(`id`);

 

createAttribute()

createAttribute()方法生成一個新的屬性物件節點，並返回它。

attribute = document.createAttribute(name);

createAttribute方法的引數name，是屬性的名稱。

setAttribute()

setAttribute()方法用於設定元素屬性

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");

等同於

var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);

 

removeAttribute()

removeAttribute()用於刪除元素屬性

node.removeAttribute(`id`);

 

屬性操作 案例：

使用setAttribute()、getAttribute()、removeAttribute()方法進行id的增刪改查

 

 

 

內容

innerText

innerText是一個可寫屬性，返回元素內包含的文字內容，在多層次的時候會按照元素由淺到深的順序拼接其內容

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外層div的innerText返回內容是 "123456"

innerHTML

innerHTML屬性作用和innerText類似，但是不是返回元素的文字內容，而是返回元素的HTML結構，在寫入的時候也會自動構建DOM

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外層div的innerHTML返回內容是 "<p>123<span>456</span></p>"

常見使用方式

修改樣式

可修改元素的 style 屬性，修改結果直接反映到頁面元素

document.querySelector(`p`).style.color = `red`
document.querySelector(`.box`).style.backgroundColor = `#ccc`

 

獲取樣式 getComputedStyle

使用getComputedStyle獲取元素計算後的樣式，不要通過 node.style.屬性 獲取

var node = document.querySelector(`p`)
var color = window.getComputedStyle(node).color
console.log(color)

 

class 操作

var nodeBox = document.querySelector(`.box`)
console.log( nodeBox.classList )
nodeBox.classList.add(`active`)   //新增 class
nodeBox.classList.remove(`active`)  //刪除 class
nodeBox.classList.toggle(`active`)   //新增/刪除切換
node.classList.contains(`active`)   // 判斷是否擁有 class

樣式的改變儘量使用 class 的新增刪除來實現

關於 DOM操作/事件 的Demo

DEMO

相關文章