JavascriptDom元素獲取和添加的示例分析
小編給大家分享一下Javascript Dom元素獲取和添加的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)企業(yè)建站,十載網(wǎng)站建設(shè)經(jīng)驗(yàn)，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁(yè)設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營(yíng)經(jīng)驗(yàn)，設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對(duì)于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動(dòng)的思維在網(wǎng)頁(yè)中充分展現(xiàn)，通過對(duì)客戶行業(yè)精準(zhǔn)市場(chǎng)調(diào)研，為客戶提供的解決方案。
1.Dom元素的獲取
document.getElementById()：通過id獲取一個(gè)Dom元素
document.getElementsByClassName()：通過class名字獲取一個(gè)或多個(gè)Dom元素（偽數(shù)組）
document.getElementsByTagName()：通過標(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ì)出問題
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元素的子元素，父元素，兄弟元素
通過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可以通過設(shè)置cookie存儲(chǔ)在瀏覽器上的一些臨時(shí)信息。
看完了這篇文章，相信你對(duì)“Javascript Dom元素獲取和添加的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
網(wǎng)頁(yè)標(biāo)題：JavascriptDom元素獲取和添加的示例分析
文章轉(zhuǎn)載：
http://weahome.cn/article/phocsi.html
重慶分公司
重慶分公司
