DOM 操作

来源:https://www.cnblogs.com/evenyao/archive/2018/07/28/9381969.html
-Advertisement-
Play Games

DOM，文檔對象模型。是HTML和XML文檔的編程介面。它給文檔（結構樹）提供了一個結構化的表述並且定義了一種方式—程式可以對結構樹進行訪問，以改變文檔的結構，樣式和內容。 DOM 提供了一種表述形式將文檔作為一個結構化的節點組以及包含屬性和方法的對象。從本質上說，它將web 頁面和腳本或編程語言連 ...


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:[email protected]:4097/path/a.html?x=111#part1

document.location.href // "http://user:[email protected]: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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 深入理解JavaScript的事件迴圈（Event Loop）
    一、什麼是事件迴圈 JS的代碼執行是基於一種事件迴圈的機制，之所以稱作事件迴圈，MDN給出的解釋為 因為它經常被用於類似如下的方式來實現 如果當前沒有任何消息queue.waitForMessage 會等待同步消息到達 我們可以把它當成一種程式結構的模型，處理的方案。更詳細的描述可以查看 這篇文章 ...
  • macbook 入門
    [1]按鍵 [2]電池使用 [3]觸摸板 [4]調度中心 [5]快捷鍵 [6]軟體設置 [7]常用功能 ...
  • node.js和MongoDB學習網址
    回想我寫的node.js和MongoDB的博客，都是菜鳥教程那裡的知識，所以我打算不寫了，那些都是基礎，在項目開發中，我發現單單有那些基礎不行，這些基礎可以儘快學好，然後學習項目開發過程 下麵是兩個教程的鏈接： https://www.runoob.com/nodejs/nodejs-tutoria ...
  • addEventListener 的一些好方法 簡單粗暴的說給你
    function show(){ document.addEventListener("click",fn,{ "passive":false, "capture":false, "once":true }); "passive" 就是告訴瀏覽器 我可不可以用 stopPropagation 在執行 ...
  • button onclick實現跳轉的常用方法
    1、onclick="javascript:window.location.href='aa.htm' " 2、onclick="location='URL' " 1、onclick="javascript:window.location.href='aa.htm' " 2、onclick="loc ...
  • 第3章 jQuery中的DOM操作
    parent() 、parents()、closest() 區別示例： 滑鼠移動到 a 上去，立即顯示文字提示效果：this 當前對象，e 滑鼠 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
  • vscode對Vue文件的html部分格式化失效問題解決辦法
    使用vscode編輯vue文件時發現突然格式化代碼不會對<template> </template>之間的html生效了，解決辦法很簡單 文件 --> 首選項 > 設置 搜索 vetur.format.defaultFormatter.html （前提當然是你已經裝了 "vetur" 插件） 可以看 ...
  • 監聽瀏覽器返回，pushState，popstate 事件，window.history對象
    在WebApp或瀏覽器中，會有點擊返回、後退、上一頁等按鈕實現自己的關閉頁面、調整到指定頁面、確認離開頁面或執行一些其它操作的需求。可以使用 popstate 事件進行監聽返回、後退、上一頁操作。 一、簡單介紹 history 中的操作 1.window.history.back()，後退 2.wi ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類