DOM操作

DOM定義:

文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它給文檔（結(jié)構(gòu)樹）提供了一個結(jié)構(gòu)化的表述并且定義了一種方式—程序可以對結(jié)構(gòu)樹進(jìn)行訪問，以改變文檔的結(jié)構(gòu)，樣式和內(nèi)容。
DOM 提供了一種表述形式將文檔作為一個結(jié)構(gòu)化的節(jié)點(diǎn)組以及包含屬性和方法的對象。從本質(zhì)上說，它將web 頁面和腳本或編程語言連接起來了。


image

document對象

每個載入瀏覽器的HTML文檔都會成為document對象，document對象包含文檔的基本信息，我們可以用通過JavaScript對HTML頁面中的所有元素進(jìn)行訪問修改。

TIM圖片20190219134010.png

document對象常用屬性：

  • doctype、head、body


    TIM圖片20190219134331.png
  • activeElement:
    activeElement屬性返回當(dāng)前文檔中獲得焦點(diǎn)的那個元素。
  • location
    TIM圖片20190219135102.png

    location屬性返回一個只讀對象，提供了當(dāng)前文檔的 URL信息。
// 假定當(dāng)前網(wǎng)址為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"
TIM圖片20190219135025.png
// 跳轉(zhuǎn)到另一個網(wǎng)址
document.location.assign('http://www.google.com')
// 優(yōu)先從服務(wù)器重新加載
document.location.reload(true)
// 優(yōu)先從本地緩存重新加載（默認(rèn)值）
document.location.reload(false)
// 跳轉(zhuǎn)到另一個網(wǎng)址，但當(dāng)前文檔不保留在history對象中，
// 即無法用后退按鈕，回到當(dāng)前文檔
document.location.assign('http://www.google.com')
// 將location對象轉(zhuǎn)為字符串，等價(jià)于document.location.href
document.location.toString()
雖然location屬性返回的對象是只讀的，但是可以將URL賦值給這個屬性，網(wǎng)頁就會自動跳轉(zhuǎn)到指定網(wǎng)址。
document.location = 'http://www.example.com';
// 等價(jià)于
document.location.;
  • 實(shí)現(xiàn)當(dāng)前頁面的刷新：
document.location = '當(dāng)前頁面地址'
document.location.reload(true)
document.location.assign('當(dāng)前頁面地址')
  • readyState：
    readyState屬性返回當(dāng)前文檔的狀態(tài)，共有三種可能值：
  1. loading：加載HTML代碼階段，尚未解析完成。
  2. interactive：加載外部資源階段。
  3. complete：全部加載完成。
  • cookie
    cookie是存儲在客戶端的文本。
    TIM圖片20190219135928.png
  • innerText
    innerText是一個可寫屬性，返回元素包含的文本內(nèi)容，在多層次的時候會按照元素由淺到深的順序拼接成其內(nèi)容。
    document.innerText:會過濾掉所有的標(biāo)簽，只顯示內(nèi)容的拼接。
<p>
  123
  <span>456</span>
</p>
//最終的顯示為123456
  • innerHTML、outerHTML
    innerHTML屬性作用和innerText類似，但是不是返回元素的文本內(nèi)容，而是返回元素的HTML結(jié)構(gòu)，在寫入的時候也會自動創(chuàng)建DOM。
<p>
  123
  <span>456</span>
</p>
p.innerHTML,最終顯示：
123
 <span>456</span>

document對象常用的方法：

  • write():
    document.write方法用于向當(dāng)前文檔寫入內(nèi)容。只要當(dāng)前文檔還沒有用close方法關(guān)閉，它所寫入的內(nèi)容就會追加在已有內(nèi)容的后面。
document.open();
document.write("hello");
document.write("world");
document.close();
  1. 如果頁面已經(jīng)渲染完成再調(diào)用write方法，它會先調(diào)用open方法，擦除當(dāng)前文檔所有內(nèi)容，然后再寫入。
  2. 如果在頁面渲染過程中調(diào)用write方法，并不會調(diào)用open方法。
  3. 需要注意的是，雖然調(diào)用close方法之后，無法再用write方法寫入內(nèi)容，但這時當(dāng)前頁面的其他DOM節(jié)點(diǎn)還是會繼續(xù)加載。
  4. 除了某些特殊情況，應(yīng)該盡量避免使用document.write這個方法。
  • Element
  1. 除了document對象，在DOM中最常用的就是Element對象了，Element對象表示HTML元素。
  2. Element 對象可以擁有類型為元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)的子節(jié)點(diǎn)，DOM提供了一系列的方法可以進(jìn)行元素的增、刪、改、查操作
  3. Element有幾個重要屬性
  • nodeName：元素標(biāo)簽名，還有個類似的tagName
  • nodeType：元素類型
  • className：類名
  • id：元素id
  • children：子元素列表（HTMLCollection）
  • childNodes：子元素列表（NodeList）
  • firstChild：第一個子元素
  • lastChild：最后一個子元素
  • nextSibling：下一個兄弟元素
  • previousSibling：上一個兄弟元素
  • parentNode、parentElement：父元素

查詢元素

  • getElementById()
    getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。這也是獲取一個元素最快的方法。
    TIM圖片20190219141605.png
  • getElementsByClassName()
    getElementsByClassName方法返回一個類似數(shù)組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實(shí)時反映在返回結(jié)果中。這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
    TIM圖片20190219141815.png
  • getElementsByTagName()
    getElementsByTagName方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象，也就是說，搜索結(jié)果是一個動態(tài)集合，任何元素的變化都會實(shí)時反映在返回的集合中。這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
    TIM圖片20190219141941.png
  • 或者id = 'ct'的div里面的p元素
    ct.getElementsByTagName('p')
    TIM圖片20190219142317.png
  • querySelector()
    querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個節(jié)點(diǎn)滿足匹配條件，則返回第一個匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
document.querySelector('#ct');
docyument.querySelector('#ct a');

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

  • querySelectorAll()
    querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對象。NodeList對象不是動態(tài)集合，所以元素節(jié)點(diǎn)的變化無法實(shí)時反映在返回結(jié)果中。
    TIM圖片20190219142707.png

    querySelector兼容性：caniuse.com

創(chuàng)建元素

  • createElement()
    createElement方法用來生成HTML元素節(jié)點(diǎn)。
    createElement方法的參數(shù)為元素的標(biāo)簽名，即元素節(jié)點(diǎn)的tagName屬性。如果傳入大寫的標(biāo)簽名，會被轉(zhuǎn)為小寫。如果參數(shù)帶有尖括號（即<和>）或者是null，會報(bào)錯。
    document.createElement('div')
  • createTextNode()
    createTextNode方法用來生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
  • createDocumentFragment()
    createDocumentFragment方法生成一個DocumentFragment對象。
var docFragment = document.createDocumentFragment();
//沒有參數(shù)

DocumentFragment對象是一個存在于內(nèi)存的DOM片段，但是不屬于當(dāng)前文檔，常常用來生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當(dāng)前文檔。這樣做的好處在于，因?yàn)镈ocumentFragment不屬于當(dāng)前文檔，對它的任何改動，都不會引發(fā)網(wǎng)頁的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)。

修改元素

  • appendChild()
    把一個DOM對象添加到父容器上。
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
  • insertBefore()
    在某個元素之前插入元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
  • replaceChild()
    replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素
    newDiv.replaceChild(newElement, oldElement);

刪除元素

  • removeChild()
    parentNode.removeChild(childNode);
  • clone元素
    cloneNode()方法用于克隆元素，方法有一個布爾值參數(shù)，傳入true的時候會深復(fù)制，也就是會復(fù)制元素及其子元素（IE還會復(fù)制其事件），false的時候只復(fù)制元素本身.
    node.cloneNode(true);

屬性操作

  • getAttribute()
    getAttribute()用于獲取元素的attribute值
    node.getAttribute('id');
  • createAttribute()
    createAttribute()方法生成一個新的屬性對象節(jié)點(diǎn)，并返回它。
    attribute = document.createAttribute(name);
    createAttribute方法的參數(shù)name，是屬性的名稱。
  • setAttribute()
    setAttribute()方法用于設(shè)置元素屬性
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);
  • romoveAttribute()
    removeAttribute()用于刪除元素屬性
    node.removeAttribute('id');

classList()

  • 添加class
    xx.classList.add('active')
  • 刪除class
    xx.classList.remove('active')
  • 是否包含某個class
    xx.classList.contains('active')

示例：

TIM圖片20190219145510.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 基本介紹 文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它給文檔（結(jié)構(gòu)樹）提供了一個結(jié)構(gòu)化的表述并且...
    草鞋弟閱讀 580評論 0贊 0
  • ??DOM（文檔對象模型）是針對 HTML 和 XML 文檔的一個 API（應(yīng)用程序編程接口）。 ??DOM 描繪...
    霜天曉閱讀 3,865評論 0贊 7
  • 文檔對象模型 DOM DOM 是 JavaScript 操作?頁的接口，全稱為“文檔對象模型”(Document ...
    yuhuan121閱讀 408評論 0贊 0
  • ??DOM 1 級主要定義的是 HTML 和 XML 文檔的底層結(jié)構(gòu)。 ??DOM2 和 DOM3 級則在這個結(jié)構(gòu)...
    霜天曉閱讀 1,599評論 1贊 3
  • 節(jié)點(diǎn) 節(jié)點(diǎn)類型 每個節(jié)點(diǎn)都有一個 nodeType 屬性，用于表示節(jié)點(diǎn)類型。nodeType 屬性返回節(jié)點(diǎn)的類型。...
    練曉習(xí)閱讀 540評論 0贊 4

友情鏈接更多精彩內(nèi)容