JavaScript DOM操作

節(jié)點(diǎn)

節(jié)點(diǎn)類型

每個節(jié)點(diǎn)都有一個 nodeType 屬性，用于表示節(jié)點(diǎn)類型。nodeType 屬性返回節(jié)點(diǎn)的類型。nodeType 是只讀的。常用的節(jié)點(diǎn)類型如下圖所示（圖片摘自MDN）

nodetype.jpg

節(jié)點(diǎn)關(guān)系

  • childNodes 屬性以 NodeList 對象返回節(jié)點(diǎn)的子節(jié)點(diǎn)集合。NodeList 是一種類數(shù)組對象，用于保存一組有序的節(jié)點(diǎn)。NodeList 對象是基于 DOM 結(jié)構(gòu)動態(tài)執(zhí)行查詢的結(jié)果，因此 DOM 結(jié)構(gòu)的變化能夠自動反映在 NodeList 對象中。

    var firstChild = someNode.childNodes[0];
var len = someNode.length;

  • firstChild 屬性和 lastChild 屬性分別返回指定節(jié)點(diǎn)的第一個和最后一個子節(jié)點(diǎn)。

  • parentNode 屬性返回指定節(jié)點(diǎn)的父節(jié)點(diǎn)。

  • previousSibling 屬性和 nextSibling 屬性分別返回指定節(jié)點(diǎn)的上一個和下一個同級節(jié)點(diǎn)
    node.png

Node.contains(otherNode) 來表示傳入的節(jié)點(diǎn)是否為該節(jié)點(diǎn)的后代節(jié)點(diǎn) Node.compareDocumentPosition(otherNode ) 方法用于比較當(dāng)前節(jié)點(diǎn)與文檔中的另一個節(jié)點(diǎn)的位置關(guān)系 Node.hasChildNodes() 方法用于判斷當(dāng)前節(jié)點(diǎn)是否有子節(jié)點(diǎn)，返回一個布爾值

操作節(jié)點(diǎn)

  • appendChild() 方法用于向 childNodes 列表的末尾插入一個節(jié)點(diǎn)。添加節(jié)點(diǎn)后，相關(guān)節(jié)點(diǎn) DOM 結(jié)構(gòu)得到更新，更新完成后返回新增的節(jié)點(diǎn)。

    // someNode 有多個子節(jié)點(diǎn)
var returnedNode = someNode.appendChild(someNode.firstChild);
alert((returnedNode = someNode.firstChild)); //false
alert((returnedNode = someNode.lastChild)); //true

  • insertBefore() 方法用于向 childNodes 列表的特定位置插入一個節(jié)點(diǎn)，并返回被插入的節(jié)點(diǎn)。這個方法接受兩個參數(shù)：要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)。被插入的節(jié)點(diǎn)將變成參照節(jié)點(diǎn)的前一個同胞節(jié)點(diǎn)（previousSibling）。 若參照節(jié)點(diǎn)是 null，則 insertBefore() 與 appendChild()執(zhí)行相同的操作。

    // 插入到最后一個子節(jié)點(diǎn)前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length - 2]); //ture

  • replaceChild() 方法用新節(jié)點(diǎn)替換某個子節(jié)點(diǎn),并返回要替換的節(jié)點(diǎn)。這個方法接受兩個參數(shù)：插入的新節(jié)點(diǎn)和要替換的節(jié)點(diǎn)。

    // 替換第一個子節(jié)點(diǎn)
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

    注意：任何 DOM 節(jié)點(diǎn)都不能同時出現(xiàn)在文檔的多個位置。所以，如果以上的三個方法中要新插入的節(jié)點(diǎn)已經(jīng)是文檔的一部分了，那么這個新插入的節(jié)點(diǎn)將從原來的位置轉(zhuǎn)移到新位置。

  • removeChild() 方法用于移除節(jié)點(diǎn)。這個方法接受一個參數(shù)：要移除的節(jié)點(diǎn)。

    // 移除第一個子節(jié)點(diǎn)
var formerFirstChild = someNode.removeChild(someNode.firstChild);

  • ChildNode.remove() 方法把調(diào)用節(jié)點(diǎn)元素 ChildNode 從它所屬的 DOM 樹中刪除。

    // id 為 'div-01' 的 div 被刪掉了
document.getElementById("div-01").remove();

  • cloneNode() 方法用于創(chuàng)建調(diào)用這個方法的節(jié)點(diǎn)的副本。此方法接受一個布爾值參數(shù)，表示是否進(jìn)行深復(fù)制。深復(fù)制就是復(fù)制節(jié)點(diǎn)及其子節(jié)點(diǎn)樹；淺復(fù)制是只復(fù)制節(jié)點(diǎn)本身。復(fù)制后返回的節(jié)點(diǎn)副本沒有父節(jié)點(diǎn)，屬于文檔中的一個“孤兒”，所以通常還會通過 appendChild()、insertBefore()或 replaceChild() 將它添加到文檔中。

  • normalize() 方法；規(guī)劃化元素內(nèi)的文本節(jié)點(diǎn)。如果在包含一個或多個文本節(jié)點(diǎn)的父元素上調(diào)用這個方法，則會將所有文本節(jié)點(diǎn)合并為一個節(jié)點(diǎn)，合并之后的新的文本節(jié)點(diǎn)的 nodeValue 等于合并前的每個文本節(jié)點(diǎn)的 nodeValue 值拼接起來的值。（瀏覽器自身永遠(yuǎn)不會創(chuàng)建相鄰的文本節(jié)點(diǎn)，這種一個元素包含多個文本節(jié)點(diǎn)的情況一般是在操作 DOM 時產(chǎn)生的）

文檔

var htmlEle = document.documentElemnet; // 取得對<html>元素的引用
var bodyEle = document.body; // 取得對<body>元素的引用
var headEle = document.head || document.getElementsByTagName("head")[0]; //取得對<head>的引用;
var title = document.title; //取得文檔標(biāo)題
document.title = "new title"; //修改當(dāng)前頁面的標(biāo)題
var charset = document.charset; // 取得文檔中實(shí)際使用的字符集
document.charset = "UTF-8"; // 修改文檔字符集
var url = document.URL; //取得完整的URL（即地址欄中顯示的URL）*只讀*
var domain = document.domain; //取得頁面的域名
var referrer = document.referrer; //取得鏈接到當(dāng)前頁面的那個頁面的URL *只讀*
var doc_state = document.readyState; // 取得文檔的當(dāng)前狀態(tài)（有兩個可能的值：loading 和 complete）*只讀*
var focus_ele = document.activeElement; //取得文檔中當(dāng)前獲得焦點(diǎn)的元素 *只讀*
var if_focus = document.hasFocus(); //取得用于檢測文檔是否獲取焦點(diǎn)的布爾值。

元素

通過 nodeName 或 tagName 屬性訪問元素的標(biāo)簽名。每個 HTML 元素都有下列屬性： id, title, dir, dir(語言的方向), className

alert(document.body.tagName); // "BODY"

插入標(biāo)記

  • innerHTML 屬性
    在讀模式下，此屬性返回與調(diào)用元素的所有子節(jié)點(diǎn)（包括元素、注釋、文本節(jié)點(diǎn)）對應(yīng)的 HTML 標(biāo)記 寫模式下，innerHTML 會根據(jù)指定的值創(chuàng)建新的 DOM 樹，然后用這個 DOM 樹完全替換調(diào)用元素原先的所有子節(jié)點(diǎn)。（通過 innerHTML 屬性插入的 script 元素不會執(zhí)行其中的腳本）

  • insertAdjacentHTML( position,text) 方法
    這個方法接受兩個參數(shù)：插入位置和要插入的 HTML 文本。第一個參數(shù)的可能值為："beforebegin"," afterbegin","beforeend","afterend"。
    注意: beforebegin 和 afterend 位置,僅在節(jié)點(diǎn)在樹中且節(jié)點(diǎn)具有一個 parent 元素時工作

// 作為前一個同輩元素插入
element.insertAdjacentHTML("beforebegin", "<p>hello world !</p>");
// 插入元素內(nèi)部的第一個子節(jié)點(diǎn)之前。
element.insertAdjacentHTML("afterbegin", "<p>hello world !</p>");
// 插入元素內(nèi)部的最后一個子節(jié)點(diǎn)之后。
element.insertAdjacentHTML("beforeend", "<p>hello world !</p>");
// 作為后一個同輩元素插入
element.insertAdjacentHTML("afterend", "<p>hello world !</p>");
  • insertAdjacentElement(position, element)
    這個方法接受兩個參數(shù)：插入位置和要插入的元素節(jié)點(diǎn),此方法將一個給定的元素節(jié)點(diǎn)插入到相對于被調(diào)用的元素的給定的一個位置,返回插入的元素，插入失敗則返回 null.
    注意: 當(dāng)節(jié)點(diǎn)處于 DOM 樹中而且有一個父元素的時候 beforebegin 和 afterend 操作才能起作用。

插入文本

  • textContent 屬性
    Node.textContent 屬性可以表示一個節(jié)點(diǎn)及其內(nèi)部節(jié)點(diǎn)的文本內(nèi)容。
    讀模式下，textContent 會由淺入深將子文檔樹中的所有文本拼接起來。寫模式下，會刪除元素的所有子節(jié)點(diǎn)，插入包含相應(yīng)文本值得文本節(jié)點(diǎn)。

  • insertAdjacentText ( position,text) 方法
    此方法和 insertAdjacentHTML() 方法用法相同，不過是第二個參數(shù)只能是純文本。

元素屬性

<!-- 以下面這個元素為例 -->
<div
  id="my_div"
  class="bd"
  title="body_text"
  my_attr="hello"
  data-appId="123"
></div>

var div = document.getElementById("my_div"); // 取得對上面元素的引用
  • 獲取元素屬性的數(shù)量
    通過元素的 attributes.length 屬性 獲取屬性數(shù)量
var len = div.attributes.lenght;
  • 刪除元素屬性
    removeAttribute() 方法 用于徹底刪除元素屬性;
div.removeAttribute("title"); //刪除 title 屬性
  • 獲取并操作屬性
    方法 1： 通過元素自身直接獲取、修改和添加屬性
  // 獲取元素屬性
  var class = div.className;
  var id = div.id;
  // 修改元素屬性
  div.title = "some other text"；
  // 添加元素屬性
  div.lang= "en";

方法 2（推薦）： 通過 getAttribute() 方法 獲取屬性， setAttribute() 方法 修改和添加屬性

//獲取元素屬性
var title = div.getAttribute("title");
var my_attr = div.getAttribute("my_attr");
// 修改元素屬性
div.setAttribute("class", "ft");
div.setAttribute("my_attr", "hi");
// 給添加屬性
div.setAttribute("lang", "en");
div.setAttribute("my_name", "Tom");

上述兩種方法的區(qū)別：方法 2 既可以獲取標(biāo)準(zhǔn)的屬性還可以獲取自定義屬性，而方法 1 只能訪問標(biāo)準(zhǔn)的屬性無法訪問自定義屬性。

  • 自定義數(shù)據(jù)屬性
    還可以通過元素的 dataset 屬性 來獲取和修改自定義屬性的值
var appId = div.dataset.appId; // 取得自定義屬性的值
div.dataset.appId = "234"; // 修改自定義屬性的值

創(chuàng)建元素

var div = document.createElement("div"); // 創(chuàng)建一個<div>元素

由于新創(chuàng)建的元素屬于文檔中的一個“孤兒”，所以通常還會通過 appendChild()、insertBefore()或 replaceChild() 將它添加到文檔中。

獲取對元素的引用

  • 取得對文檔的子元素節(jié)點(diǎn)的引用
var head = document.head || document.getElementsByTagName("head")[0]; //取得對<head>的引用
var html = document.documentElement; //取得對<html>的引用
var body = document.body; //取得對<body>的引用
  • 取得對特定的某個或某組元素的引用

getElementById() 方法 無法通過 HTML 元素調(diào)用該方法
getElementsByClassName() 方法 接收一個包含一或多個類名的字符串作為參數(shù)，返回帶有指定類名的所有元素的 Nodelist 集合。

var eles = document.getElementByClassName("btn banner"); // 取得所有類中包含“btn”和“banner”的元素

getElementsByTagName() 方法 返回帶有指定標(biāo)簽名的對象的集合。

var all_ele = document.getElementsByTagName("*"); //取得文檔中的所有元素
var images = document.getElementsByTagName("img"); //取得頁面中所有的<img>元素
alert(images.length); //輸出<img>元素的數(shù)量
alert(images[0].src); //輸出第一個圖片元素的src屬性

getElementsByName() 方法; 返回帶有指定名稱的對象的集合，該方法常用于取得單選按鈕。無法通過 HTML 元素調(diào)用該方法。
querySelector() 方法 querySelector() 方法接收一個 CSS 選擇符作為參數(shù)，返回與該模式匹配的第一個元素。如果沒有找到匹配的元素，則返回 null

var p_first = document.querySelector("p"); //獲取文檔中第一個<p>  元素
var example = document.querySelector(".example"); // 獲取文檔中 class="example" 的第一個元素
var p_example = document.querySelector("p.example"); //獲取文檔中 class="example" 的第一個<p>元素
var a_target = document.querySelector("a[target]"); // 獲取文檔中有"target"屬性的第一個<a>元素
var p_em = document.querySelector("p em"); // 獲取文檔中第一個<p>元素內(nèi)的第一個<em>元素

querySelectorAll() 方法 querySelectorAll() 方法接收一個 CSS 選擇符作為參數(shù)，返回與該模式匹配的所有元素的集合。

元素關(guān)系

  • children 屬性 元素的 children 屬性中只包含元素中同樣還是元素的子節(jié)點(diǎn)；childNodes 的元素版。
  • childElementCount 屬性 返回子元素（不包括注釋和文本節(jié)點(diǎn)）的個數(shù)
  • firstElementChild 屬性 指向第一個子元素；firstChild 的元素版
  • lastElementChild 屬性指向最后一個子元素；lastChild 的元素版
  • previousElementSibling 屬性指向前一個同級元素；previousSibling 的元素版
  • nextElementSibling 屬性指向后一個同級元素；nextSibling 的元素版
  • parentElement 屬性 返回當(dāng)前節(jié)點(diǎn)的父元素節(jié)點(diǎn),如果該元素沒有父節(jié)點(diǎn),或者父節(jié)點(diǎn)不是一個元素節(jié)點(diǎn).則 返回 null

操作元素

  • hasFocus() 方法 返回布爾值，用于檢測文檔(或文檔內(nèi)的任一元素)是否獲得焦點(diǎn)。
  • matchesSelector() 方法 接收一個 CSS 選擇符作為參數(shù)，如果調(diào)用函數(shù)與該選擇符匹配，返回 true；否則，返回 false。

元素樣式

classList 屬性返回元素的 class 類名列表集合，返回的列表集合也有一個 length 屬性來表示類的個數(shù)，該屬性用于在元素中添加，移除及切換 CSS 類。classList 屬性是只讀的，但可以使用下面的方法修改它。

  • add(value): 將給定的字符串值添加到列表中。如果值已經(jīng)存在，則不添加。
  • contains(value): 表示列表中是否存在給定的值，如果存在則返回 true，否則返回 false。
  • remove(value): 從列表中刪除給定的字符串。
  • toggle(value): 如果列表中已經(jīng)存在給定的值則刪除它；如果列表中沒有給定的值則添加它。

文本

  • 通過 nodeValue 或 data 屬性 獲取文本節(jié)點(diǎn)的內(nèi)容。
  • 通過 length 屬性 獲取文本節(jié)點(diǎn)中字符的數(shù)目。
  • 使用 document.createTextNode() 創(chuàng)建新文本節(jié)點(diǎn)
  • 使用 Element.innerText 屬性獲取節(jié)點(diǎn)及其后代的“渲染”文本內(nèi)容
  • 使用 Node.textContent 屬性獲取節(jié)點(diǎn)及其后代的文本內(nèi)容
// 創(chuàng)建一個<div>元素并向其中添加一個文本節(jié)點(diǎn)
var ele = document.createElement("div");
ele.className = "message";
var text = document.createTextNode("hello world");
ele.appendChild(text);
document.body.appendChild(ele);

操作文本

  • appendData(text): 將 text 添加到節(jié)點(diǎn)的末尾。
  • deleteDate(offset, count): 從 offset 指定的位置開始刪除 count 個字符。
  • insertData(offset, text): 在 offset 指定的位置插入 text。
  • replaceData(offset, count, text): 用 text 替換從 offset 指定的位置開始到 offset+count 為止處的文本。
  • substringData(offset, count): 提取從 offset 指定的位置開始到 offset+count 為止處的字符串。
  • splitText(offset): 從 offset 指定的位置將當(dāng)前文本節(jié)點(diǎn)分成兩個文本節(jié)點(diǎn)。

分割文本節(jié)點(diǎn)是從文本節(jié)點(diǎn)中提取數(shù)據(jù)的一種常用的 DOM 技術(shù)。

// 以上面創(chuàng)建的<div>元素為例
// 分割文本節(jié)點(diǎn)
var newNode = ele.firstChild.splitText(5);
alert(ele.firstChild.nodeValue); // "hello"
alert(newNode.nodeValue); //" world"
alert(ele.childNodes.length); // 2

樣式

通過 style 對象獲取并操作元素的內(nèi)聯(lián)樣式

這個 style 對象包含著通過元素 style 屬性設(shè)置的內(nèi)聯(lián)樣式信息，不包含外部樣式表或嵌入樣式表繼承層疊而來的樣式。

  • style 對象的一些屬性和方法 ：

cssText： 讀模式下返回 style 屬性中 CSS 代碼的內(nèi)部表示；寫模式下，賦給 cssText 的值會重寫 元素 style 屬性的值。
length： 元素 style 屬性中的 css 屬性數(shù)量
parentRule： 表示 css 信息的 CSSRule 對象
getPropertyValue(propertyName)： 返回給定屬性的字符串值
item(index)： 返回給定位置的 css 屬性的名稱
removePropertyValue(propertyName)： 從元素 style 屬性中刪除給定屬性
setProperty(propertyName,value,priority)： 將給定屬性設(shè)置為相應(yīng)的值，并加上優(yōu)先權(quán)標(biāo)志（“important” 或者一個空字符串）

  • 通過document.defaultView.getComputedStyle()獲取元素的計算樣式
    此方法接受兩個參數(shù)：目標(biāo)元素和一個偽元素字符串（例如":after"），如果不需要偽元素信息第二個參數(shù)可以為 null。

注意： 計算的樣式是只讀的；計算的樣式包含瀏覽器的默認(rèn)樣式。

最后編輯于 ：
?著作權(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？？？ DOM(Document Object Model 文檔對象模型)是針對HTML和XML文檔的...
    熒惑3_3閱讀 1,560評論 0贊 1
  • 每天一句：成長的速度取決于在過程中發(fā)現(xiàn)和解決問題的速度，最終這是一個量變引發(fā)質(zhì)變的過程； DOM(Document...
    EndEvent閱讀 647評論 0贊 0
  • Element 類型 除了 Document 類型之外，Element 類型就要算是 Web 編程中最常用的類型了...
    劼哥stone閱讀 703評論 0贊 3
  • 第一次臨摹一個圖標(biāo)，學(xué)習(xí)到了很多關(guān)于圖層樣式的技巧。在此，也查了很多圖層樣式里的概念幫助自己理解，并進(jìn)行了思維...
    阿達(dá)777閱讀 294評論 2贊 1
  • 進(jìn)群一周潛水了一周，在群里的一周我其實(shí)我也沒閑著，在看每一位朋友親人發(fā)的感恩詞，之前不發(fā)表是因?yàn)檎娴牟恢涝趺慈フf...
    夢不贏最美閱讀 280評論 0贊 0

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