【收藏】JavaScriptDOM操作簡(jiǎn)易速查手冊(cè)-創(chuàng)新互聯(lián)

1 概述

1.1 前言

本文中簡(jiǎn)要羅列了JavaScript操作Dom的基本方法，其中包括元素查詢、文檔結(jié)構(gòu)遍歷、屬性及內(nèi)容操作、創(chuàng)建節(jié)點(diǎn)、插入節(jié)點(diǎn)及刪除節(jié)點(diǎn)等內(nèi)容。雖然JQuery更便利，但我還是喜歡用原生的API。

創(chuàng)新互聯(lián)主要從事網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)濱海新區(qū),十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575

2 文檔元素選取

2.1 ID選擇器

通過(guò)ID選取元素是最簡(jiǎn)單和常用的選取元素的方法，ID選擇器性能優(yōu)于其它選擇器。

var title = document.getElementById("title");

ID不存在，返回 null 。

查看示例程序

2.2 名稱選擇器

基于name屬性的值選取元素區(qū)別于ID選擇器。其一，name屬性值 不是必須唯一，多個(gè)元素可能有同樣的名稱；其二，name屬性只在少數(shù)HTML元素中有效，包括表單、表單元素、iframe 及 img 元素。

var sports = document.getElementsByName("sports");

查看示例程序

2.3 標(biāo)簽選擇器

利用HTML元素的標(biāo)簽名稱選取指定類型的元素。

var h2 = document.getElementsByTagName("h2");

查看示例程序

2.4 類選擇器

通過(guò)HTML的 class 屬性值選擇元素。

var title = document.getElementsByClassName("title");

查看示例程序

2.5 CSS單元素選擇器

通過(guò)CSS樣式表選擇器的強(qiáng)大語(yǔ)法，來(lái)選擇元素。返回第一個(gè)匹配的元素。

var title = document.querySelector("#title");   // CSS ID選擇
var h2 = document.querySelector("h2");     //選取第一個(gè)h2元素

查看示例程序

2.6 CSS多元素選擇器

這是最強(qiáng)大的終極選擇器

var h2s = document.querySelectorAll("h2");    //返回所有h2標(biāo)簽元素

查看示例程序

3 DOM遍歷

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

3.1.1 父節(jié)點(diǎn)-parentNode

返回父節(jié)點(diǎn)，如果 document 對(duì)象調(diào)用則返回 null。

var parent = node.parentNode;

查看示例程序

3.1.2 子節(jié)點(diǎn)-childNodes

返回所有子節(jié)點(diǎn)，即NodeList對(duì)象。

var children = node.childNodes;

查看示例程序

3.1.3 首子節(jié)點(diǎn)-firstChild

返回第一個(gè)子節(jié)點(diǎn)。

var first = node.firstChild;

查看示例程序

3.1.4 尾子節(jié)點(diǎn)-lastChild

返回最后一個(gè)子節(jié)點(diǎn)。

var last = node.lastChild;

查看示例程序

3.1.5 下一兄弟節(jié)點(diǎn)-nextSibling

返回下一個(gè)兄弟節(jié)點(diǎn)。

var next = node.nextSibling;

查看示例程序

3.1.6 前一兄弟節(jié)點(diǎn)-previousSibling

返回前一個(gè)兄弟節(jié)點(diǎn)。

var previous = node.previousSibling;

查看示例程序

3.1.7 節(jié)點(diǎn)類型-nodeType

返回節(jié)點(diǎn)類型的數(shù)字表示。

• 1代表 Element 節(jié)點(diǎn)
• 3代表 Text 節(jié)點(diǎn)
• 8代表 Comment 節(jié)點(diǎn)
• 9代表 Document 節(jié)點(diǎn)
• 11代表 DocumentFragment 節(jié)點(diǎn)

查看示例程序

3.1.8 節(jié)點(diǎn)值-nodeValue

返回 Text 節(jié)點(diǎn) 或 Comment 節(jié)點(diǎn)的值。

var value = node.nodeValue;

查看示例程序

3.1.9 節(jié)點(diǎn)名-nodeName

返回元素的標(biāo)簽名，以大寫形式表示。

var name = node.nodeName;

查看示例程序

3.2 元素相關(guān)

3.2.1 子元素-children

返回所有子元素。

var children = node.children;

查看示例程序

3.2.2 首子元素-firstElementChild

元素是節(jié)點(diǎn)的一種。

返回所有子元素中的第一個(gè)。

var first = node.firstElementChild;

查看示例程序

3.2.3 尾子元素-lastElementChild

返回所有子元素中的最后一個(gè)。

var last= node.lastElementChild;

查看示例程序

3.2.4 下一兄弟元素-nextElementSibling

返回下一個(gè)兄弟元素。

var next = node.nextElementSibling;

查看示例程序

3.2.5 前一兄弟元素-previousElementSibling

返回前一兄弟元素。

var previous = node.previousElementSibling;

查看示例程序

3.2.6 子元素?cái)?shù)量

返回子元素的數(shù)量。

var count = node.childElementCount;

查看示例程序

4 屬性

4.1 標(biāo)準(zhǔn)屬性

表示HTML文檔元素的 HTMLElement 對(duì)象定義了讀/寫屬性，它們對(duì)應(yīng)于元素的HTML屬性。HTMLElement 定義了通用的HTML屬性，包括id、lang、dir、事件處理程序 onclick 及表單相關(guān)屬性等。

form.action = "http://30ke.cn";
form.method = "post";

查看示例程序

4.2 非標(biāo)準(zhǔn)屬性

4.2.1 獲取屬性值-getAttribute

返回非標(biāo)準(zhǔn)的HTML屬性的值。

var width = img.getAttribute("width");

查看示例程序

4.2.2 屬性值設(shè)置-setAttribute

設(shè)置非標(biāo)準(zhǔn)的HTML屬性的值。

img.setAttribute("width","400px");

查看示例程序

4.2.3 屬性存在檢測(cè)-hasAttribute

返回布爾值，用來(lái)檢測(cè)屬性是否存在。

var result = img.hasAttribute("width");

查看示例程序

4.2.4 刪除屬性-removeAttribute

刪除某一屬性。

img.removeAttribute("width");

查看示例程序

4.3 數(shù)據(jù)集屬性-dataset

在HTML5文檔中，任意以 data- 為前綴的小寫的屬性名字都是合法的。這些 “數(shù)據(jù)集屬性” 定義了一種標(biāo)準(zhǔn)的、附加額外數(shù)據(jù)的方法。

var x = img.dataset.x;

查看示例程序

4.4 元素屬性-attributes

Node節(jié)點(diǎn)定義了 attributes 屬性，針對(duì) Element 對(duì)象，attributes 是元素所有屬性的類數(shù)組對(duì)象。

var attributes = img.attributes;

索引 attributes 對(duì)象得到的值是 Attr 對(duì)象。Attr 的 name 和 value 返回該屬性的名字和值。

查看示例程序

5 元素內(nèi)容

5.1 元素內(nèi)容-innerHTML

innerHTML 屬性以字符串形式返回這個(gè)元素的內(nèi)容。也可以用來(lái)替換元素當(dāng)前內(nèi)容。

var innerHTML = parent.innerHTML;     // 獲取節(jié)點(diǎn)的內(nèi)容
parent.innerHTML = "<h2>三十課</h2>";  //替換節(jié)點(diǎn)的內(nèi)容

查看示例程序

5.2 元素及內(nèi)容-outerHTML

outerHTML 屬性以字符串形式返回這個(gè)元素及內(nèi)容。也可以用來(lái)替換當(dāng)前元素及內(nèi)容。

var outerHTML = parent.outerHTML;     // 獲取節(jié)點(diǎn)及內(nèi)容
parent.outerHTML= "<h2>三十課</h2>";  //替換節(jié)點(diǎn)及其內(nèi)容

查看示例程序

5.3 純文本元素內(nèi)容-textContent

查詢或替換純文本元素內(nèi)容的標(biāo)準(zhǔn)方法是用Node的textContent屬性來(lái)實(shí)現(xiàn)。在IE中，可以用 Element 的 innerText 屬性來(lái)代替。

console.log(title.textContent);
title.textContent = "三十課2";

查看示例程序

6 創(chuàng)建節(jié)點(diǎn)

6.1 創(chuàng)建元素節(jié)點(diǎn)-createElement

使用 document 對(duì)象的 createElement() 方法創(chuàng)建新的 Element節(jié)點(diǎn)。

var h2 = document.createElement("h2");

查看示例程序

6.2 創(chuàng)建文本節(jié)點(diǎn)-createTextNode

創(chuàng)建純文本節(jié)點(diǎn)。

var txt = document.createTextNode("三十課");

查看示例程序

6.3 創(chuàng)建文檔片段-createDocumentFragment

使用文檔片段通常會(huì)帶來(lái)更好的性能。因?yàn)槲臋n片段存在于內(nèi)存中，并不在DOM樹中，所以將子元素插入到文檔片段時(shí)不會(huì)引起頁(yè)面回流（對(duì)元素位置和幾何上的計(jì)算）。

var fragment = document.createDocumentFragment();

查看示例程序

6.4 創(chuàng)建注釋節(jié)點(diǎn)-createComment

創(chuàng)建注釋節(jié)點(diǎn)不經(jīng)常使用。

var comment = document.createComment("Created by 毛瑞");

查看示例程序

6.5 節(jié)點(diǎn)克隆-cloneNode

通過(guò)復(fù)制已存在的節(jié)點(diǎn)來(lái)創(chuàng)建新的文檔節(jié)點(diǎn)。傳參數(shù) true 表示深克隆，false表示淺復(fù)制。

var title2 = title.cloneNode(true);

查看示例程序

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

7.1 插入子節(jié)點(diǎn)-appendChild

在指定元素上插入子節(jié)點(diǎn)，并使其成為該節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。

parent.appendChild(h3);

查看示例程序

7.2 節(jié)點(diǎn)前插入-insertBefore

• 在父節(jié)點(diǎn)上調(diào)用本方法
• 第一參數(shù)表示待插入的節(jié)點(diǎn)
• 第二參數(shù)是父節(jié)點(diǎn)中已經(jīng)存在的子節(jié)點(diǎn)，新節(jié)點(diǎn)插入到該節(jié)點(diǎn)的前面

parent.insertBefore(h2,h3);   // h2插入到h3之前。

查看示例程序

8 刪除和替換

8.1 刪除子節(jié)點(diǎn)-removeChild

• 在父節(jié)點(diǎn)上調(diào)用
• 參數(shù)是待刪除的節(jié)點(diǎn)

parent.removeChild(h3);

查看示例程序

8.2 替換子節(jié)點(diǎn)-replaceChild

• 在父節(jié)點(diǎn)上調(diào)用
• 第一個(gè)參數(shù)是新節(jié)點(diǎn)
• 第二個(gè)參數(shù)是需要替換的節(jié)點(diǎn)

parent.replaceChild(h3n , h3);

查看示例程序

9 結(jié)尾

9.1 結(jié)語(yǔ)

本人知識(shí)水平有限，在匯編的過(guò)程中時(shí)有錯(cuò)誤發(fā)生，如發(fā)現(xiàn)請(qǐng)不吝指正！多謝。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文名稱：【收藏】JavaScriptDOM操作簡(jiǎn)易速查手冊(cè)-創(chuàng)新互聯(lián)
本文路徑：http://www.muchs.cn/article0/pccio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、手機(jī)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站收錄、虛擬主機(jī)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)