JavaScript DOM節(jié)點(diǎn)操作方法總結(jié)
節(jié)點(diǎn)類型主要有三種：元素節(jié)點(diǎn)，屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)。
而對DOM的主要也就是圍繞元素節(jié)點(diǎn)和屬性節(jié)點(diǎn)的增刪改查。下面就分別從對元素節(jié)點(diǎn)的操作和對屬性節(jié)點(diǎn)的操作來介紹。
元素節(jié)點(diǎn)
查
在對DOM進(jìn)行增刪改之前，首先要找到對應(yīng)的元素。具體的查找方法如下：
getElementByID() // 得到單個(gè)節(jié)點(diǎn) getElementsByTagName() // 得到節(jié)點(diǎn)數(shù)組 NodeList getElementsByName() // 得到節(jié)點(diǎn)數(shù)組 NodeList
同時(shí)還可以利用元素節(jié)點(diǎn)的屬性獲取它的父子節(jié)點(diǎn)和文本節(jié)點(diǎn)：
子節(jié)點(diǎn)
Node.childNodes //獲取子節(jié)點(diǎn)列表NodeList; 注意換行在瀏覽器中被算作了text節(jié)點(diǎn)，如果用這種方式獲取節(jié)點(diǎn)列表，需要進(jìn)行過濾 Node.firstChild //返回第一個(gè)子節(jié)點(diǎn) Node.lastChild //返回最后一個(gè)子節(jié)點(diǎn)
父節(jié)點(diǎn)
Node.parentNode // 返回父節(jié)點(diǎn) Node.ownerDocument //返回祖先節(jié)點(diǎn)（整個(gè)document）
同胞節(jié)點(diǎn)
Node.previousSibling // 返回前一個(gè)節(jié)點(diǎn)，如果沒有則返回null 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()
復(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)
/*插入node*/
parentNode.appendChild(childNode); // 將新節(jié)點(diǎn)追加到子節(jié)點(diǎn)列表的末尾
parentNode.insertBefore(newNode, targetNode); //將newNode插入targetNode之前
/*插入html代碼*/
node.insertAdjacentHTML('beforeBegin', html); //在該元素之前插入代碼
node.insertAdjacentHTML('afterBegin', html); //在該元素的第一個(gè)子元素之前插入代碼
node.insertAdjacentHTML('beforeEnd', html); //在該元素的最后一個(gè)子元素之后插入代碼
node.insertAdjacentHTML('afterEnd', html); //在該元素之后插入代碼
替換節(jié)點(diǎn)
parentNode.replace(newNode, targetNode); //使用newNode替換targetNode
刪
移除節(jié)點(diǎn)
parentNode.removeChild(childNode); // 移除目標(biāo)節(jié)點(diǎn) node.parentNode.removeChild(node); //在不清楚父節(jié)點(diǎn)的情況下使用
屬性節(jié)點(diǎn)
操作屬性節(jié)點(diǎn)，就是對DOM樣式進(jìn)行增刪改查。對于行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式有不同的操作方法；各種方法獲得的樣式也有可讀可寫和只讀之分。
直接獲取CSS樣式
node.style.color // 可讀可寫
Style本身的屬性和方法
node.style.cssText //獲取node行內(nèi)樣式字符串 node.style.length //獲取行內(nèi)樣式個(gè)數(shù) node.style.item(0) //獲取指定位置的樣式
獲取和修改元素樣式
HTML5為元素提供了一個(gè)新的屬性：classList 來實(shí)現(xiàn)對元素樣式表的增刪改查。操作如下：
node.classList.add(value); //為元素添加指定的類 node.classList.contains(value); // 判斷元素是否含有指定的類，如果存在返回true node.classList.remove(value); // 刪除指定的類 node.classList.toggle(value); // 有就刪除，沒有就添加指定類
修改DOM特性的方法
Node.getAttribute('id') // 獲取
Node.setAttribute('id') // 設(shè)置
Node.removeAttribute() // 移除
Node.attributes // 獲取DOM全部特性
只讀方法
getComputedStyle是window的方法。它能夠獲取當(dāng)前元素所有最終使用的CSS屬性值，但是是只讀的。它有兩個(gè)參數(shù)，第一個(gè)為傳入的節(jié)點(diǎn)，第二個(gè)可以傳入:hover, :blur等獲取其偽類樣式，如果沒有則傳入null。
然而IE并不支持getComputedStyle方法，可以使用currentStyle來保持兼容性：
window.getComputedStyle ? window.getComputedStyle(node, null) : node.currentStyle
以上這篇JavaScript DOM節(jié)點(diǎn)操作方法總結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)全選和全不選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
JavaScript基于對象方法實(shí)現(xiàn)數(shù)組去重及排序操作示例
這篇文章主要介紹了JavaScript基于對象方法實(shí)現(xiàn)數(shù)組去重及排序操作,涉及javascript基于對象方法的數(shù)組遍歷、比較、去重、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
ToolTip 通過Js實(shí)現(xiàn)代替超鏈接中的title效果
ToolTip 通過Js實(shí)現(xiàn)代替超鏈接中的title效果，需要的朋友可以參考下。2011-04-04
這篇文章主要介紹了JavaScript中return的用法,包括return定義，寫法等方面的知識(shí)，需要的朋友可以參考下2017-05-05
JS實(shí)現(xiàn)超炫網(wǎng)頁煙花動(dòng)畫效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)超炫網(wǎng)頁煙花動(dòng)畫效果的方法,實(shí)例分析了javascript實(shí)現(xiàn)煙花動(dòng)畫效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
整理一些JavaScript的IE和火狐的兼容性注意事項(xiàng)
整理一些JavaScript的IE和火狐的兼容性解決方法，有更好的方法多多交流2011-03-03
Javascript中匿名函數(shù)的調(diào)用與寫法實(shí)例詳解(多種)
js中定義函數(shù)的方式有很多種，函數(shù)直接量就是其中一種，下面通過本文給大家介紹匿名函數(shù)是如何調(diào)用的及匿名函數(shù)的n中寫法，對js匿名函數(shù)調(diào)用，js匿名函數(shù)寫法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
本篇文章主要是對js判斷字符是否是漢字的兩種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
Javascript 自適應(yīng)高度的Tab選項(xiàng)卡
選項(xiàng)卡的原理其實(shí)比較簡單，就是設(shè)置2種狀態(tài)，選中和未選中的2中不同CSS狀態(tài)，因此也有直接不用JS之用css就能實(shí)現(xiàn)的效果2011-04-04
用JS替換字符串時(shí)。只能替換掉字符串中第一個(gè)匹配對象,有時(shí)候需要替換全部的字符，下文是具體的實(shí)現(xiàn)方法，大家可以參考下2014-12-12