欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文秒懂JavaScript DOM操作基礎(chǔ)

 更新時(shí)間:2021年04月30日 11:10:38   作者:ざ派大星  
通過這篇文章幫助大家快速學(xué)習(xí)JavaScript DOM操作基礎(chǔ)的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

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ì)象僅支持
getElementsByTagNamegetElementsByClassName

修改元素

(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)文章

最新評(píng)論