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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類