一文秒懂JavaScript DOM操作基礎(chǔ)
DOM概念
DOM:document object model : 文檔對(duì)象模型
通過js去操作HTML的代碼,添加元素,刪除元素。。。
獲取元素
(1)getElementById 通過id獲取,獲取到的是一個(gè)元素
(2)getElementsByTagName 通過標(biāo)簽名獲取,獲取到的是一個(gè)元素集合(數(shù)組)
(3)getElementsByClassName 通過class獲取,獲取到的是一個(gè)元素集合(數(shù)組)
(4)getElementsByName 通過name屬性獲取,獲取到的是一個(gè)元素集合(數(shù)組)
總結(jié):獲取元素可以根據(jù)標(biāo)簽名、id、class、name屬性來獲取。Id獲取的結(jié)果是一個(gè) 元素,而其他獲取的是一個(gè)集合。
document對(duì)象支持以上四種,而element對(duì)象僅支持
getElementsByTagName和getElementsByClassName
修改元素
(1)修改內(nèi)容
通過innerText屬性讀取或設(shè)置標(biāo)簽內(nèi)部的文本
可以用innerHTML屬性讀取或設(shè)置標(biāo)簽內(nèi)部的文本
兩個(gè)區(qū)別:innerHTML會(huì)按照HTML的規(guī)則解析文本,而innerText只是當(dāng)作普通的文本 內(nèi)容。
(2)修改樣式
a:xxx.style.yyy
b:xxx.classname = “……”(相當(dāng)于修改了class屬性)
添加刪除元素
(1)createElement 創(chuàng)建一個(gè)元素節(jié)點(diǎn)
createElement(“p”)創(chuàng)建一個(gè)段落
(2)createTextNode創(chuàng)建一個(gè)文本節(jié)點(diǎn)
createTextNode(“文本內(nèi)容”)創(chuàng)建一個(gè)值為“文本內(nèi)容”的文本節(jié)點(diǎn)
(3)appendChild 添加子節(jié)點(diǎn)
(4)removeChild 刪除子節(jié)點(diǎn)
導(dǎo)航
Document:根節(jié)點(diǎn)
parentNode: 獲取父節(jié)點(diǎn)
childNodes: 獲取所有的子節(jié)點(diǎn)
firstChild:第一個(gè)子節(jié)點(diǎn)
lastChild:最后一個(gè)子節(jié)點(diǎn)
到此這篇關(guān)于JavaScript DOM操作基礎(chǔ)的文章就介紹到這了,更多相關(guān)JavaScript DOM基礎(chǔ)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中的object轉(zhuǎn)換成number或string規(guī)則介紹
這篇文章主要介紹了JavaScript中的object轉(zhuǎn)換成number或string規(guī)則介紹,本文講解了object自動(dòng)轉(zhuǎn)換成string的規(guī)則、object自動(dòng)轉(zhuǎn)換成number的規(guī)則等內(nèi)容,需要的朋友可以參考下2014-12-12JS實(shí)現(xiàn)無縫循環(huán)marquee滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)無縫循環(huán)marquee滾動(dòng)效果,兼容IE, FireFox, Chrome,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05常用js,css文件統(tǒng)一加載方法(推薦) 并在加載之后調(diào)用回調(diào)函數(shù)
下面小編就為大家?guī)硪黄S胘s,css文件統(tǒng)一加載方法(推薦) 并在加載之后調(diào)用回調(diào)函數(shù)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09JavaScript使用表單元素驗(yàn)證表單的示例代碼
這篇文章主要介紹了JavaScript使用表單元素驗(yàn)證表單的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08如何在Mozilla Gecko 用Javascript加載XSL
如何在Mozilla Gecko 用Javascript加載XSL...2007-01-01JavaScript通過元素的ID和name設(shè)置樣式
這篇文章主要介紹了JavaScript通過元素的ID和name設(shè)置其樣式,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以測(cè)試下2014-07-07javascript設(shè)計(jì)模式 – 中介者模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 中介者模式,結(jié)合實(shí)例形式分析了javascript中介者模式基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04Bootstrap 折疊(Collapse)插件用法實(shí)例詳解
這篇文章主要介紹了Bootstrap 折疊(Collapse)插件用法實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-06-06