在jquery中，dom是“文檔對(duì)象模型”的意思，是“Document Object Model”的縮寫，是W3C國(guó)際組織的一套Web標(biāo)準(zhǔn)；dom定義了訪問HTML文檔對(duì)象的一套屬性、方法和事件，可被JavaScript用來讀取、改變HTML、XHTML以及XML文檔。

本教程操作環(huán)境：windows10系統(tǒng)、jquery3.6.0版本、Dell G3電腦。

jquery中dom是什么意思

jquery中的dom是指文檔對(duì)象模型（Document Object Model），是W3C國(guó)際組織的一套Web標(biāo)準(zhǔn)。它定義了訪問HTML文檔對(duì)象的一套屬性、方法和事件。

什么是DOM？

要改變頁面的某個(gè)東西，JavaScript 就需要獲得對(duì) HTML 文檔中所有元素進(jìn)行訪問的入口。這個(gè)入口，連同對(duì) HTML 元素進(jìn)行添加、移動(dòng)、改變或移除的方法和屬性，都是通過文檔對(duì)象模型來獲得的（DOM）。

在 1998 年，W3C 發(fā)布了第一版的 DOM 規(guī)范。這個(gè)規(guī)范允許訪問和操作 HTML 頁面中的每一個(gè)單獨(dú)的元素。

所有的瀏覽器都執(zhí)行了這個(gè)標(biāo)準(zhǔn)，因此，DOM 的兼容性問題也幾乎難覓蹤影了。 DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔

HTML-DOM

HTML-DOM 在使用JavaScript和DOM為HTML文件編寫腳本，有許多專屬于HTML-DOM的屬性. HTML-DOM的出現(xiàn)甚至比DOM Core還要早，它提供一些更簡(jiǎn)明的符號(hào)來描述各種HTML元素的屬性。

例如： 使用HTML-DOM來獲取表單對(duì)象 的方法： document.forms

CSS-DOM

CSS-DOM是針對(duì)CSS的操作。在JavaScript中，CSS-DOM技術(shù)的主要作用是獲取和設(shè)置style對(duì)象的各種屬性。通過改變style對(duì)象的各種屬性，可以使網(wǎng)頁呈現(xiàn)出各種不同的效果

設(shè)置某個(gè)元素style對(duì)象字體顏色的方法： elements.style.color = “red”;

JQuery中的DOM操作

查找節(jié)點(diǎn)

元素可以通過text()方法讀取其中的html內(nèi)容，相當(dāng)于DOM的innerHTML屬性

$(function(){  var $para = $("p");         // 獲取<p>節(jié)點(diǎn)  var $li = $("ul li:eq(1)");         // 獲取第二個(gè)<li>元素節(jié)點(diǎn)  var p_txt = $para.attr("title");     // 輸出<p>元素節(jié)點(diǎn)屬性title  var ul_txt = $li.attr("title");         // 獲取<ul>里的第二個(gè)<li>元素節(jié)點(diǎn)的屬性title  var li_txt = $li.text();         // 輸出第二個(gè)<li>元素節(jié)點(diǎn)的text  });

插入節(jié)點(diǎn)

視頻教程推薦：jQuery視頻教程