整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML DOM 節(jié)點(diǎn)
在 HTML DOM (Document Object Model) 中, 每個(gè)東西都是 節(jié)點(diǎn) :
文檔本身就是一個(gè)文檔對(duì)象
所有 HTML 元素都是元素節(jié)點(diǎn)
所有 HTML 屬性都是屬性節(jié)點(diǎn)
插入到 HTML 元素文本是文本節(jié)點(diǎn)
注釋是注釋節(jié)點(diǎn)
元素對(duì)象
在 HTML DOM 中, 元素對(duì)象代表著一個(gè) HTML 元素。
元素對(duì)象 的 子節(jié)點(diǎn)可以是, 可以是元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，注釋節(jié)點(diǎn)。
NodeList 對(duì)象 代表了節(jié)點(diǎn)列表，類似于 HTML元素的子節(jié)點(diǎn)集合。
元素可以有屬性。屬性屬于屬性節(jié)點(diǎn)。
瀏覽器支持
所有主流瀏覽器都支持 元素對(duì)象 和 NodeList 對(duì)象。.
屬性和方法
以上屬性和方法可適用于所有 HTML 元素：
| 屬性 / 方法 | 描述 |
|---|---|
| element.accessKey | 設(shè)置或返回accesskey一個(gè)元素 |
| element.addEventListener() | 向指定元素添加事件句柄 |
| element.appendChild() | 為元素添加一個(gè)新的子元素 |
| element.attributes | 返回一個(gè)元素的屬性數(shù)組 |
| element.childNodes | 返回元素的一個(gè)子節(jié)點(diǎn)的數(shù)組 |
| element.classlist | 返回元素的類名，作為 DOMTokenList 對(duì)象。 |
| element.className | 設(shè)置或返回元素的class屬性 |
| element.clientHeight | 在頁面上返回內(nèi)容的可視高度（不包括邊框，邊距或滾動(dòng)條） |
| element.clientWidth | 在頁面上返回內(nèi)容的可視寬度（不包括邊框，邊距或滾動(dòng)條） |
| element.cloneNode() | 克隆某個(gè)元素 |
| element.compareDocumentPosition() | 比較兩個(gè)元素的文檔位置。 |
| element.contentEditable | 設(shè)置或返回元素的內(nèi)容是否可編輯 |
| element.dir | 設(shè)置或返回一個(gè)元素中的文本方向 |
| element.firstChild | 返回元素的第一個(gè)子節(jié)點(diǎn) |
| element.focus() | 設(shè)置文檔或元素獲取焦點(diǎn) |
| element.getAttribute() | 返回指定元素的屬性值 |
| element.getAttributeNode() | 返回指定屬性節(jié)點(diǎn) |
| element.getElementsByTagName() | 返回指定標(biāo)簽名的所有子元素集合。 |
| element. getElementsByClassName() | 返回文檔中所有指定類名的元素集合，作為 NodeList 對(duì)象。 |
| element.getFeature() | 返回指定特征的執(zhí)行APIs對(duì)象。 |
| element.getUserData() | 返回一個(gè)元素中關(guān)聯(lián)鍵值的對(duì)象。 |
| element.hasAttribute() | 如果元素中存在指定的屬性返回 true，否則返回false。 |
| element.hasAttributes() | 如果元素有任何屬性返回true，否則返回false。 |
| element.hasChildNodes() | 返回一個(gè)元素是否具有任何子元素 |
| element.hasFocus() | 返回布爾值，檢測(cè)文檔或元素是否獲取焦點(diǎn) |
| element.id | 設(shè)置或者返回元素的 id。 |
| element.innerHTML | 設(shè)置或者返回元素的內(nèi)容。 |
| element.insertBefore() | 現(xiàn)有的子元素之前插入一個(gè)新的子元素 |
| element.isContentEditable | 如果元素內(nèi)容可編輯返回 true，否則返回false |
| element.isDefaultNamespace() | 如果指定了namespaceURI 返回 true，否則返回 false。 |
| element.isEqualNode() | 檢查兩個(gè)元素是否相等 |
| element.isSameNode() | 檢查兩個(gè)元素所有有相同節(jié)點(diǎn)。 |
| element.isSupported() | 如果在元素中支持指定特征返回 true。 |
| element.lang | 設(shè)置或者返回一個(gè)元素的語言。 |
| element.lastChild | 返回的最后一個(gè)子元素 |
| element.namespaceURI | 返回命名空間的 URI。 |
| element.nextSibling | 返回該元素緊跟的一個(gè)節(jié)點(diǎn) |
| element.nodeName | 返回元素的標(biāo)記名（大寫） |
| element.nodeType | 返回元素的節(jié)點(diǎn)類型 |
| element.nodeValue | 返回元素的節(jié)點(diǎn)值 |
| element.normalize() | 使得此成為一個(gè)"normal"的形式，其中只有結(jié)構(gòu)（如元素，注釋，處理指令，CDATA節(jié)和實(shí)體引用）隔開Text節(jié)點(diǎn)，即元素（包括屬性）下面的所有文本節(jié)點(diǎn)，既沒有相鄰的文本節(jié)點(diǎn)也沒有空的文本節(jié)點(diǎn) |
| element.offsetHeight | 返回，任何一個(gè)元素的高度包括邊框和填充，但不是邊距 |
| element.offsetWidth | 返回元素的寬度，包括邊框和填充，但不是邊距 |
| element.offsetLeft | 返回當(dāng)前元素的相對(duì)水平偏移位置的偏移容器 |
| element.offsetParent | 返回元素的偏移容器 |
| element.offsetTop | 返回當(dāng)前元素的相對(duì)垂直偏移位置的偏移容器 |
| element.ownerDocument | 返回元素的根元素（文檔對(duì)象） |
| element.parentNode | 返回元素的父節(jié)點(diǎn) |
| element.previousSibling | 返回某個(gè)元素緊接之前元素 |
| element.querySelector() | 返回匹配指定 CSS 選擇器元素的第一個(gè)子元素 |
| document.querySelectorAll() | 返回匹配指定 CSS 選擇器元素的所有子元素節(jié)點(diǎn)列表 |
| element.removeAttribute() | 從元素中刪除指定的屬性 |
| element.removeAttributeNode() | 刪除指定屬性節(jié)點(diǎn)并返回移除后的節(jié)點(diǎn)。 |
| element.removeChild() | 刪除一個(gè)子元素 |
| element.removeEventListener() | 移除由 addEventListener() 方法添加的事件句柄 |
| element.replaceChild() | 替換一個(gè)子元素 |
| element.scrollHeight | 返回整個(gè)元素的高度（包括帶滾動(dòng)條的隱蔽的地方） |
| element.scrollLeft | 返回當(dāng)前視圖中的實(shí)際元素的左邊緣和左邊緣之間的距離 |
| element.scrollTop | 返回當(dāng)前視圖中的實(shí)際元素的頂部邊緣和頂部邊緣之間的距離 |
| element.scrollWidth | 返回元素的整個(gè)寬度（包括帶滾動(dòng)條的隱蔽的地方） |
| element.setAttribute() | 設(shè)置或者改變指定屬性并指定值。 |
| element.setAttributeNode() | 設(shè)置或者改變指定屬性節(jié)點(diǎn)。 |
| element.setIdAttribute() | |
| element.setIdAttributeNode() | |
| element.setUserData() | 在元素中為指定鍵值關(guān)聯(lián)對(duì)象。 |
| element.style | 設(shè)置或返回元素的樣式屬性 |
| element.tabIndex | 設(shè)置或返回元素的標(biāo)簽順序。 |
| element.tagName | 作為一個(gè)字符串返回某個(gè)元素的標(biāo)記名（大寫） |
| element.textContent | 設(shè)置或返回一個(gè)節(jié)點(diǎn)和它的文本內(nèi)容 |
| element.title | 設(shè)置或返回元素的title屬性 |
| element.toString() | 一個(gè)元素轉(zhuǎn)換成字符串 |
| nodelist.item() | 返回某個(gè)元素基于文檔樹的索引 |
| nodelist.length | 返回節(jié)點(diǎn)列表的節(jié)點(diǎn)數(shù)目。 |
HTML DOM 節(jié)點(diǎn)
在 HTML DOM (Document Object Model) 中, 每個(gè)東西都是 節(jié)點(diǎn) :
文檔本身就是一個(gè)文檔對(duì)象
所有 HTML 元素都是元素節(jié)點(diǎn)
所有 HTML 屬性都是屬性節(jié)點(diǎn)
插入到 HTML 元素文本是文本節(jié)點(diǎn)
注釋是注釋節(jié)點(diǎn)
元素對(duì)象
在 HTML DOM 中, 元素對(duì)象代表著一個(gè) HTML 元素。
元素對(duì)象 的 子節(jié)點(diǎn)可以是, 可以是元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，注釋節(jié)點(diǎn)。
NodeList 對(duì)象 代表了節(jié)點(diǎn)列表，類似于 HTML元素的子節(jié)點(diǎn)集合。
元素可以有屬性。屬性屬于屬性節(jié)點(diǎn)（查看下一節(jié)）。
瀏覽器支持
所有主流瀏覽器都支持 元素對(duì)象 和 NodeList 對(duì)象。.
屬性和方法
以上屬性和方法可適用于所有 HTML 元素：
| 屬性 / 方法 | 描述 |
|---|---|
| element.accessKey | 設(shè)置或返回accesskey一個(gè)元素 |
| element.addEventListener() | 向指定元素添加事件句柄 |
| element.appendChild() | 為元素添加一個(gè)新的子元素 |
| element.attributes | 返回一個(gè)元素的屬性數(shù)組 |
| element.childNodes | 返回元素的一個(gè)子節(jié)點(diǎn)的數(shù)組 |
| element.classlist | 返回元素的類名，作為 DOMTokenList 對(duì)象。 |
| element.className | 設(shè)置或返回元素的class屬性 |
| element.clientHeight | 在頁面上返回內(nèi)容的可視高度（不包括邊框，邊距或滾動(dòng)條） |
| element.clientWidth | 在頁面上返回內(nèi)容的可視寬度（不包括邊框，邊距或滾動(dòng)條） |
| element.cloneNode() | 克隆某個(gè)元素 |
| element.compareDocumentPosition() | 比較兩個(gè)元素的文檔位置。 |
| element.contentEditable | 設(shè)置或返回元素的內(nèi)容是否可編輯 |
| element.dir | 設(shè)置或返回一個(gè)元素中的文本方向 |
| element.firstChild | 返回元素的第一個(gè)子節(jié)點(diǎn) |
| element.focus() | 設(shè)置文檔或元素獲取焦點(diǎn) |
| element.getAttribute() | 返回指定元素的屬性值 |
| element.getAttributeNode() | 返回指定屬性節(jié)點(diǎn) |
| element.getElementsByTagName() | 返回指定標(biāo)簽名的所有子元素集合。 |
| element. getElementsByClassName() | 返回文檔中所有指定類名的元素集合，作為 NodeList 對(duì)象。 |
| element.getFeature() | 返回指定特征的執(zhí)行APIs對(duì)象。 |
| element.getUserData() | 返回一個(gè)元素中關(guān)聯(lián)鍵值的對(duì)象。 |
| element.hasAttribute() | 如果元素中存在指定的屬性返回 true，否則返回false。 |
| element.hasAttributes() | 如果元素有任何屬性返回true，否則返回false。 |
| element.hasChildNodes() | 返回一個(gè)元素是否具有任何子元素 |
| element.hasfocus() | 返回布爾值，檢測(cè)文檔或元素是否獲取焦點(diǎn) |
| element.id | 設(shè)置或者返回元素的 id。 |
| element.innerHTML | 設(shè)置或者返回元素的內(nèi)容。 |
| element.insertBefore() | 現(xiàn)有的子元素之前插入一個(gè)新的子元素 |
| element.isContentEditable | 如果元素內(nèi)容可編輯返回 true，否則返回false |
| element.isDefaultNamespace() | 如果指定了namespaceURI 返回 true，否則返回 false。 |
| element.isEqualNode() | 檢查兩個(gè)元素是否相等 |
| element.isSameNode() | 檢查兩個(gè)元素所有有相同節(jié)點(diǎn)。 |
| element.isSupported() | 如果在元素中支持指定特征返回 true。 |
| element.lang | 設(shè)置或者返回一個(gè)元素的語言。 |
| element.lastChild | 返回的最后一個(gè)子元素 |
| element.namespaceURI | 返回命名空間的 URI。 |
| element.nextSibling | 返回該元素緊跟的一個(gè)元素 |
| element.nodeName | 返回元素的標(biāo)記名（大寫） |
| element.nodeType | 返回元素的節(jié)點(diǎn)類型 |
| element.nodeValue | 返回元素的節(jié)點(diǎn)值 |
| element.normalize() | 使得此成為一個(gè)"normal"的形式，其中只有結(jié)構(gòu)（如元素，注釋，處理指令，CDATA節(jié)和實(shí)體引用）隔開Text節(jié)點(diǎn)，即元素（包括屬性）下面的所有文本節(jié)點(diǎn)，既沒有相鄰的文本節(jié)點(diǎn)也沒有空的文本節(jié)點(diǎn) |
| element.offsetHeight | 返回，任何一個(gè)元素的高度包括邊框和填充，但不是邊距 |
| element.offsetWidth | 返回元素的寬度，包括邊框和填充，但不是邊距 |
| element.offsetLeft | 返回當(dāng)前元素的相對(duì)水平偏移位置的偏移容器 |
| element.offsetParent | 返回元素的偏移容器 |
| element.offsetTop | 返回當(dāng)前元素的相對(duì)垂直偏移位置的偏移容器 |
| element.ownerDocument | 返回元素的根元素（文檔對(duì)象） |
| element.parentNode | 返回元素的父節(jié)點(diǎn) |
| element.previousSibling | 返回某個(gè)元素緊接之前元素 |
| element.querySelector() | 返回匹配指定 CSS 選擇器元素的第一個(gè)子元素 |
| document.querySelectorAll() | 返回匹配指定 CSS 選擇器元素的所有子元素節(jié)點(diǎn)列表 |
| element.removeAttribute() | 從元素中刪除指定的屬性 |
| element.removeAttributeNode() | 刪除指定屬性節(jié)點(diǎn)并返回移除后的節(jié)點(diǎn)。 |
| element.removeChild() | 刪除一個(gè)子元素 |
| element.removeEventListener() | 移除由 addEventListener() 方法添加的事件句柄 |
| element.replaceChild() | 替換一個(gè)子元素 |
| element.scrollHeight | 返回整個(gè)元素的高度（包括帶滾動(dòng)條的隱蔽的地方） |
| element.scrollLeft | 返回當(dāng)前視圖中的實(shí)際元素的左邊緣和左邊緣之間的距離 |
| element.scrollTop | 返回當(dāng)前視圖中的實(shí)際元素的頂部邊緣和頂部邊緣之間的距離 |
| element.scrollWidth | 返回元素的整個(gè)寬度（包括帶滾動(dòng)條的隱蔽的地方） |
| element.setAttribute() | 設(shè)置或者改變指定屬性并指定值。 |
| element.setAttributeNode() | 設(shè)置或者改變指定屬性節(jié)點(diǎn)。 |
| element.setIdAttribute() | |
| element.setIdAttributeNode() | |
| element.setUserData() | 在元素中為指定鍵值關(guān)聯(lián)對(duì)象。 |
| element.style | 設(shè)置或返回元素的樣式屬性 |
| element.tabIndex | 設(shè)置或返回元素的標(biāo)簽順序。 |
| element.tagName | 作為一個(gè)字符串返回某個(gè)元素的標(biāo)記名（大寫） |
| element.textContent | 設(shè)置或返回一個(gè)節(jié)點(diǎn)和它的文本內(nèi)容 |
| element.title | 設(shè)置或返回元素的title屬性 |
| element.toString() | 一個(gè)元素轉(zhuǎn)換成字符串 |
| nodelist.item() | 返回某個(gè)元素基于文檔樹的索引 |
| nodelist.length | 返回節(jié)點(diǎn)列表的節(jié)點(diǎn)數(shù)目。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
avaScript 的 Rest 和 Spread 操作符自 ES6 引入以來，大大改變了開發(fā)者處理數(shù)組和對(duì)象的方式。這些操作符提供了更簡(jiǎn)潔、更易讀的語法，使代碼更易于理解和維護(hù)。本文將介紹如何有效地使用 Rest 和 Spread 操作符，并通過示例進(jìn)行說明。
Rest 操作符（...）允許你將多個(gè)元素收集到一個(gè)數(shù)組或?qū)ο笾校ǔＳ糜诤瘮?shù)參數(shù)中，將參數(shù)列表轉(zhuǎn)換為數(shù)組。而 Spread 操作符（...）則用于將數(shù)組或?qū)ο笳归_為單個(gè)元素，這在復(fù)制、合并或傳遞數(shù)組和對(duì)象時(shí)特別有用。
理解并掌握這些操作符可以大大提升你的 JavaScript 編碼水平，使代碼更加簡(jiǎn)潔和富有表現(xiàn)力。
函數(shù)參數(shù)處理
Rest 操作符在函數(shù)定義中非常有用，可以處理不定數(shù)量的參數(shù)：
function multiply(...numbers) {
return numbers.reduce((product, number) => product * number, 1);
}
console.log(multiply(2, 3, 4)); // 輸出: 24在這個(gè)例子中，multiply 函數(shù)接受任意數(shù)量的參數(shù)并進(jìn)行相乘。Rest 操作符將所有參數(shù)收集到 numbers 數(shù)組中，使得可以輕松應(yīng)用 reduce 等數(shù)組方法。
數(shù)組解構(gòu)
Rest 操作符還可以在數(shù)組解構(gòu)中使用，將剩余元素收集到一個(gè)新數(shù)組中：
const [head, ...tail] = ['a', 'b', 'c', 'd'];
console.log(head); // 輸出: 'a'
console.log(tail); // 輸出: ['b', 'c', 'd']在這個(gè)例子中，數(shù)組的第一個(gè)元素被賦值給 head，其余元素則被收集到 tail 數(shù)組中。
數(shù)組合并
使用 Spread 操作符，數(shù)組合并變得非常簡(jiǎn)單：
const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'potato'];
const food = [...fruits, ...vegetables];
console.log(food); // 輸出: ['apple', 'banana', 'carrot', 'potato']在這個(gè)例子中，Spread 操作符將 fruits 和 vegetables 展開為單個(gè)元素并合并到 food 數(shù)組中。
數(shù)組復(fù)制
創(chuàng)建數(shù)組副本同樣很方便：
const numbers = [1, 2, 3];
const numbersCopy = [...numbers];
console.log(numbersCopy); // 輸出: [1, 2, 3]這樣創(chuàng)建了一個(gè)包含與 numbers 數(shù)組相同元素的新數(shù)組 numbersCopy，修改 numbersCopy 不會(huì)影響 numbers。
對(duì)象合并
Spread 操作符還可以用于對(duì)象的合并：
const person = { name: 'Alice', age: 25 };
const job = { title: 'developer', company: 'Tech Co.' };
const employee = { ...person, ...job };
console.log(employee); // 輸出: { name: 'Alice', age: 25, title: 'developer', company: 'Tech Co.' }在這個(gè)例子中，person 和 job 被合并到 employee 對(duì)象中，形成一個(gè)新的對(duì)象。
對(duì)象解構(gòu)中的 Rest 操作符
Rest 操作符可以在對(duì)象解構(gòu)中使用，收集剩余的屬性：
const { title, ...details } = { title: 'Book', author: 'John Doe', year: 2021 };
console.log(title); // 輸出: 'Book'
console.log(details); // 輸出: { author: 'John Doe', year: 2021 }這個(gè)例子展示了如何提取特定屬性（title），同時(shí)將剩余屬性收集到 details 對(duì)象中。
Spread 操作符用于函數(shù)參數(shù)
在調(diào)用接受多個(gè)參數(shù)的函數(shù)時(shí)，Spread 操作符可以簡(jiǎn)化傳遞數(shù)組元素作為參數(shù)：
function concatenate(str1, str2, str3) {
return str1 + str2 + str3;
}
const words = ['Hello', ' ', 'World!'];
console.log(concatenate(...words)); // 輸出: 'Hello World!'通過展開 words 數(shù)組，每個(gè)元素作為獨(dú)立參數(shù)傳遞給 concatenate 函數(shù)。
JavaScript 中的 Rest 和 Spread 操作符是強(qiáng)大的工具，可以極大地增強(qiáng)代碼的靈活性和可讀性。不論是處理數(shù)組、對(duì)象還是函數(shù)參數(shù)，這些操作符都能提供優(yōu)雅的解決方案。通過掌握這些操作符，你可以編寫更簡(jiǎn)潔、高效的代碼，提升整體開發(fā)體驗(yàn)。
理解并有效使用 Rest 和 Spread 操作符，不僅可以簡(jiǎn)化當(dāng)前項(xiàng)目，還能為未來的挑戰(zhàn)做好準(zhǔn)備，使你的 JavaScript 代碼更易維護(hù)和表達(dá)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
