先看一下下列這個html的文本。
<div id="testid0604">
<p>00000</p>
11111 iiiii<br>
22222
<br>
33333<span>44444</span>
55555 uuuuu
<p>66666</p>
</div>
<p>00000</p>
11111 iiiii<br>
22222
<br>
33333<span>44444</span>
55555 uuuuu
<p>66666</p>
</div>
可以看到,div內有很多節點物件,如本例,<p></p>、<span></span>、<br>、<br>、<p></p>等5個,又稱之為元素節點。但也有文字物件、例如11111 iiiii、22222、33333、55555 uuuuu等4個,也稱為文字節點。
如果我們來進行計算,可以看到共有9個節點物件。
我們可以透過節點物件的概念,找出文字節點。這樣,我們就可以對文本內的特定文字進行操作,例如刪除。
要注意的是,javascript會把<div>以及</div>也算2個計算進去,所以,一共會有11個節點物件。但在其排列序列的數字列表是0-10。亦即<div>是序列0,而</div>是序列10。而<p>00000</p>是序列1。
語法:
<script>
const divNodesList = document.querySelector("#testid0604").childNodes;
//節點物件的集合
let Nodescontent = divNodesList[2].textContent;
//找出第2序列列表的節點元素,亦即0,1,2的2,一般概念中的第三個,其內容是什麼。
divNodesList[7].remove();
//會刪除序列7的節點,即第八個節點物件
</script>
前面的html文本,呈現如下:
00000
11111 iiiii22222
3333344444 55555 uuuuu
66666
按一下,刪除第八個節點物件。即<span>44444</span>那一個。
再按一下,把第三個(文字)節點內容,即divNodesList[2].,寫到下列的div中。
沒有留言:
張貼留言