JavascriptDom元素獲取和添加的示例分析-創(chuàng)新互聯(lián)
小編給大家分享一下Javascript Dom元素獲取和添加的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括烏蘇網(wǎng)站建設(shè)、
烏蘇網(wǎng)站制作、烏蘇網(wǎng)頁(yè)制作以及烏蘇網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，
烏蘇網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到烏蘇省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
1.Dom元素的獲取
document.getElementById()：通過(guò)id獲取一個(gè)Dom元素
document.getElementsByClassName()：通過(guò)class名字獲取一個(gè)或多個(gè)Dom元素（偽數(shù)組）
document.getElementsByTagName()：通過(guò)標(biāo)簽名字獲取一個(gè)或多個(gè)Dom元素（偽數(shù)組）
document.querySelector()：獲取指定 CSS 選擇器的一個(gè)元素
document.querySelectorAll()：獲取指定 CSS 選擇器的多個(gè)元素（偽數(shù)組）
ES6選擇器與其他選中器的區(qū)別：
document.getElementsByTagName()和document.getElementsByClassName()獲取到的都是動(dòng)態(tài)列表
document.querySelectorAll()獲取到的是靜態(tài)列表,Dom結(jié)構(gòu)發(fā)生變化要重新獲取，不然會(huì)出問(wèn)題
Test
document.getElementsByTagName()和document.getElementsByClassName()獲取到的是 HTMLCollection，不能使用foreach()遍歷
document.querySelectorAll()獲取到的NodeList，可以使用foreach()遍歷
Test
2.Dom元素節(jié)點(diǎn)類型
Dom節(jié)點(diǎn)類型分3類：元素節(jié)點(diǎn),屬性節(jié)點(diǎn),文本節(jié)點(diǎn)
每種節(jié)點(diǎn)都有3種屬性 nodeName,nodeType,nodeValue
Test
我是誰(shuí)
3.獲取Dom元素的子元素，父元素，兄弟元素
通過(guò)children屬性可以獲取當(dāng)前Dom元素的子元素
Test
獲取當(dāng)前元素的父元素
parentElement/parentNode這兩個(gè)屬性都可以
Test
獲取當(dāng)前元素的兄弟元素
previousElementSibling屬性：上一個(gè)兄弟元素
nextElementSibling屬性：下一個(gè)兄弟元素
Test
注意：
children與childNodes，前者只包含元素節(jié)點(diǎn)，而后者為元素節(jié)點(diǎn)+文本節(jié)點(diǎn)（回車換行也算是文本節(jié)點(diǎn)）
而previousElementSibling與previousSibling，nextElementSibling與nextSibling也一個(gè)道理
firstChild和lastChild：firstChild等價(jià)于childNodes[0]，lastChild相當(dāng)于childNodes的最后一個(gè)元素
4.DOM元素的添加與移除
添加子元素
appendChild()：將目標(biāo)元素作為子元素添加到當(dāng)前元素的最后面
insertBefore()：將目標(biāo)元素作為子元素添加到當(dāng)前元素中，位置可以自由選擇
Test
運(yùn)行結(jié)果
刪除子元素和替換子元素
removeChild()：刪除子元素
replaceChild()：替換子元素
語(yǔ)法：parent.removeChild(child)
語(yǔ)法：parent.removeChild(替換的元素, 被替換的元素)
Test
運(yùn)行結(jié)果：
JavaScript可以做什么
1.可以使網(wǎng)頁(yè)具有交互性，例如響應(yīng)用戶點(diǎn)擊，給用戶提供更好的體驗(yàn)。
2.可以處理表單，檢驗(yàn)用戶的輸入，并提供及時(shí)反饋節(jié)省用戶時(shí)間。
3.可以根據(jù)用戶的操作，動(dòng)態(tài)的創(chuàng)建頁(yè)面。
4使用JavaScript可以通過(guò)設(shè)置cookie存儲(chǔ)在瀏覽器上的一些臨時(shí)信息。
看完了這篇文章，相信你對(duì)“Javascript Dom元素獲取和添加的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務(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)景需求。
當(dāng)前名稱：JavascriptDom元素獲取和添加的示例分析-創(chuàng)新互聯(lián)
文章起源：
http://weahome.cn/article/dcsdec.html
重慶分公司
重慶分公司
