JS之DOM那些事

DOM 是 Document Object Model（文檔對(duì)象模型）的縮寫。DOM分為核心DOM、XML DOM、HTML DOM，我們接觸的主要是HTML DOM，HTML DOM 定義了所有 HTML 元素的對(duì)象和屬性，以及訪問它們的方法。換言之，HTML DOM 是關(guān)于如何獲取、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)。我們通過js實(shí)現(xiàn)交互的過程中，具體來說是在操作DOM節(jié)點(diǎn)。在 HTML DOM 中，所有內(nèi)容都是節(jié)點(diǎn)。

在成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設(shè)置、關(guān)鍵詞群組等細(xì)微處著手，突出企業(yè)的產(chǎn)品/服務(wù)/品牌，幫助企業(yè)鎖定精準(zhǔn)用戶，提高在線咨詢和轉(zhuǎn)化，使成都網(wǎng)站營(yíng)銷成為有效果、有回報(bào)的無錫營(yíng)銷推廣。成都創(chuàng)新互聯(lián)公司專業(yè)成都網(wǎng)站建設(shè)十年了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。

 

　DOM節(jié)點(diǎn)：節(jié)點(diǎn)在文檔中以節(jié)點(diǎn)樹的形式存在，如圖：

JS之DOM那些事

　

　節(jié)點(diǎn)分為12種不同類型，常用的有元素節(jié)點(diǎn)(1)、屬性節(jié)點(diǎn)(2)、文本節(jié)點(diǎn)(3)。同時(shí)，每種類型分別表示文檔中不同的信息及標(biāo)記。每個(gè)節(jié)點(diǎn)都擁有各自的特點(diǎn)、數(shù)據(jù)和方法，也與其他節(jié)點(diǎn)存在某種關(guān)系。節(jié)點(diǎn)之間的關(guān)系構(gòu)成了層次，而所有頁面標(biāo)記則表現(xiàn)為一個(gè)以特定節(jié)點(diǎn)為根節(jié)點(diǎn)的樹形結(jié)構(gòu)。關(guān)系圖如下：

JS之DOM那些事

了解了節(jié)點(diǎn)的基本概念后，下面先來熟悉一下節(jié)點(diǎn)3個(gè)基本屬性：nodeName、nodeType、nodeValue

nodeName：

文檔里的每個(gè)節(jié)點(diǎn)都有以下屬性。 
nodeName:一個(gè)字符串，其內(nèi)容是給定節(jié)點(diǎn)的名字。 
var name = node.nodeName; 
* 如果節(jié)點(diǎn)是元素節(jié)點(diǎn)，nodeName返回這個(gè)元素的名稱 
* 如果是屬性節(jié)點(diǎn)，nodeName返回這個(gè)屬性的名稱 
* 如果是文本節(jié)點(diǎn)，nodeName返回一個(gè)內(nèi)容為#text 的字符串 
注:nodeName 是一個(gè)只讀屬性.

nodeType：

nodeType：返回一個(gè)整數(shù)，這個(gè)數(shù)值代表著給定節(jié)點(diǎn)的類型。 
nodeType 屬性返回的整數(shù)值對(duì)應(yīng)著 12 種節(jié)點(diǎn)類型,常用的有三種： 
Node.ELEMENT_NODE —1 – 元素節(jié)點(diǎn) 
Node.ATTRIBUTE_NODE —2 – 屬性節(jié)點(diǎn) 
Node.TEXT_NODE —3 – 文本節(jié)點(diǎn) 
nodeType 是個(gè)只讀屬性

nodeValue:

nodeValue：返回給定節(jié)點(diǎn)的當(dāng)前值（字符串） 
如果給定節(jié)點(diǎn)是一個(gè)屬性節(jié)點(diǎn)，返回值是這個(gè)屬性的值。 
如果給定節(jié)點(diǎn)是一個(gè)文本節(jié)點(diǎn)，返回值是這個(gè)文本節(jié)點(diǎn)的內(nèi)容。 
如果給定節(jié)點(diǎn)是一個(gè)元素節(jié)點(diǎn)，返回值是 null 
nodeValue 是一個(gè) 讀/寫 屬性，但不能對(duì)元素節(jié)點(diǎn)的 nodeValue 屬性設(shè)置值， 
但可以為文本節(jié)點(diǎn)的 nodeValue 屬性設(shè)置一個(gè)值。

 

DOM主要是用來實(shí)現(xiàn)交互的，那么怎樣才能操作DOM節(jié)點(diǎn)實(shí)現(xiàn)交互呢？四個(gè)字：增刪改查！具體實(shí)現(xiàn)，請(qǐng)往下看 ↓↓↓

 

查：

　在對(duì)DOM節(jié)點(diǎn)進(jìn)行增刪改之前，首先要找到這個(gè)節(jié)點(diǎn)元素。查找途徑可以用節(jié)點(diǎn)方法或節(jié)點(diǎn)屬性：

 

節(jié)點(diǎn)方法：

方法描述
getElementById()返回當(dāng)前選中的單個(gè)節(jié)點(diǎn)對(duì)象
getElementsByTagName()返回當(dāng)前選中的節(jié)點(diǎn)數(shù)組NodeList對(duì)象
getElementsByClassName()返回當(dāng)前選中的節(jié)點(diǎn)數(shù)組NodeList對(duì)象，多個(gè)類名用空格隔開 //IE9+
querySelector()接收一個(gè)css選擇符，返回匹配到的第一個(gè)節(jié)點(diǎn)元素，若無則返回null //IE8+
querySelectorAll()接收一個(gè)css選擇符，返回匹配到的所有節(jié)點(diǎn)元素NodeList對(duì)象

 

 

 

 

 

 

 

 

 

注意：NodeList類似數(shù)組，但不是數(shù)組，用于保存一組有序的節(jié)點(diǎn)。它有l(wèi)ength屬性，可以通過方括號(hào)或item()方法訪問節(jié)點(diǎn)。

 

　利用節(jié)點(diǎn)屬性獲取子節(jié)點(diǎn)、父節(jié)點(diǎn)、同胞節(jié)點(diǎn)：

子節(jié)點(diǎn)：

1 Node.childNodes; //獲取子節(jié)點(diǎn)列表NodeList; 注意換行在瀏覽器中被算作了text節(jié)點(diǎn)，如果用這種方式獲取節(jié)點(diǎn)列表，需要配合nodeType屬性進(jìn)行過濾2 Node.firstChild;  //獲取第一個(gè)子元素3 Node.lastChild;  //獲取最后一個(gè)子元素4 /*childNodes會(huì)獲取到textNode，而children屬性只獲取元素節(jié)點(diǎn)*/

父節(jié)點(diǎn)：

1 Node.parentNode   // 返回父節(jié)點(diǎn)2 Node.ownerDocument  //返回祖先節(jié)點(diǎn)（整個(gè)document）

同胞節(jié)點(diǎn)：

1 Node.previousSibling    // 返回前一個(gè)節(jié)點(diǎn)，如果沒有則返回null2 Node.nextSibling       // 返回后一個(gè)節(jié)點(diǎn)

 

增：

 　新增節(jié)點(diǎn)首先要?jiǎng)?chuàng)建節(jié)點(diǎn)，然后將新建的節(jié)點(diǎn)插入DOM中，所以下面分別介紹創(chuàng)建節(jié)點(diǎn)和插入節(jié)點(diǎn)的方法，復(fù)制節(jié)點(diǎn)的方法也在創(chuàng)建節(jié)點(diǎn)中進(jìn)行介紹。

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

createElement()    // 按照指定的標(biāo)簽名創(chuàng)建一個(gè)新的元素節(jié)點(diǎn)

　創(chuàng)建代碼片段（為避免頻繁刷新DOM，可以先創(chuàng)造代碼片段，完成所有節(jié)點(diǎn)操作之后統(tǒng)一添加到DOM中）

createDocumentFragment()

 

創(chuàng)建屬性節(jié)點(diǎn)：

node.setAttribute(attr,value);  // 按照指定的屬性名創(chuàng)建一個(gè)新的屬性節(jié)點(diǎn)

 

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

node.createTextNode(value)   // 按照指定的文本創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)

 

復(fù)制節(jié)點(diǎn)：

clonedNode = Node.cloneNode(boolean) // 只有一個(gè)參數(shù)，傳入一個(gè)布爾值，true表示復(fù)制該節(jié)點(diǎn)下的所有子節(jié)點(diǎn)；false表示只復(fù)制該節(jié)點(diǎn)

 

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

JS之DOM那些事

1 /*插入node*/2 parentNode.appendChild(childNode);  // 將新節(jié)點(diǎn)追加到子節(jié)點(diǎn)列表的末尾3 parentNode.insertBefore(newNode, targetNode);  //將newNode插入targetNode之前4  5 /*插入html代碼*/6 node.insertAdjacentHTML('beforeBegin', html);  //在該元素之前插入代碼7 node.insertAdjacentHTML('afterBegin', html);  //在該元素的第一個(gè)子元素之前插入代碼8 node.insertAdjacentHTML('beforeEnd', html);  //在該元素的最后一個(gè)子元素之后插入代碼9 node.insertAdjacentHTML('afterEnd', html);  //在該元素之后插入代碼

JS之DOM那些事

　附加：DOM 沒有提供 insertAfter() 方法

JS之DOM那些事

 1 function insertAfter(newElement,targetElement){ 2    //獲取目標(biāo)元素的父節(jié)點(diǎn) 3     var parentElement=targetElement.parentNode; 4    //如果目標(biāo)元素是最后一個(gè)元素,則新元素插入到目標(biāo)元素的后面 5     if(parentElement.lastChild==targetElement){ 6         parentElement.appendChild(newElement); 7     }else{                       //如果目標(biāo)元素不是最后一個(gè)元素,則新元素插入到目標(biāo)元素的下一個(gè)兄弟節(jié)點(diǎn)的前面,即目標(biāo)元素的后面 8         parentElement.insertBefore(newElement,targetElement.nextSibling); 9     }10 }

JS之DOM那些事

 

改：

替換節(jié)點(diǎn)：

parentNode.replace(newNode, targetNode);    //使用newNode替換targetNode

 

刪：

移除節(jié)點(diǎn)：

1 parentNode.removeChild(childNode);  // 移除目標(biāo)節(jié)點(diǎn)2 node.parentNode.removeChild(node);    //在不清楚父節(jié)點(diǎn)的情況下使用

 

---------------------------------------分割線--------------------------------------------

只有節(jié)點(diǎn)還不能夠完全實(shí)現(xiàn)交互，下面再來看看如何操作樣式：

通過節(jié)點(diǎn)直接獲取樣式：

1 node.style.color    //可讀可寫  僅獲取行內(nèi) 樣式2 3 /*獲取最終樣式 且兼容所有瀏覽器寫法*/4 function getStyle(ele,style){5         return ele.currentStyle ? obj.currentStyle[style] : window.getComputedStyle(ele)[style]; //前面兼容ie、ff；后面兼容chrom、opera、safir6 };

 

獲取和修改元素樣式：

HTML5為元素提供了一個(gè)新的屬性：classList 來實(shí)現(xiàn)對(duì)元素樣式表的增刪改查。操作如下：

1 node.classList.add(value);     //為元素添加指定的類2 node.classList.contains(value);  // 判斷元素是否含有指定的類，如果存在返回true3 node.classList.remove(value);  // 刪除指定的類4 node.classList.toggle(value);  // 有就刪除，沒有就添加指定類

 

修改DOM特性的方法：

Node.getAttribute('id')    // 獲取,包括data屬性Node.setAttribute('id')    // 設(shè)置Node.removeAttribute()     // 移除Node.attributes        // 獲取DOM全部特性

分享題目：JS之DOM那些事
本文URL：http://muchs.cn/article44/ghgoee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站營(yíng)銷、微信公眾號(hào)、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)