解析dom中的children對(duì)象數(shù)組元素firstChild,lastChild的使用
<!--children對(duì)象數(shù)組元素示例 -->
<html>
<body>
<table id="tbl">
<tbody> <tr> <td> 行1列1 </td><td>行1列2 </td></tr>
<tr> <td> 行2列1 </td><td>行2列2 </td></tr>
</tbody>
</table>
<input onclick="alert(document.all.tbl.children(0).children(0).innerHTML)" value="children(0)" type="button">
<input onclick="alert(document.all.tbl.children(0).children(1).innerHTML)" value="children(1)" type="button">
<input onclick="alert(document.all.tbl.children(0).children(1).children(0).innerHTML)" value="children(2)" type="button">
<div id=test>
<a></a>
<table></table>
</div>
<script>
alert(test.children[0].tagName)
alert(test.children[1].tagName)
</script>
</body>
</html>
<!--在DOM中,整個(gè)頁面里的元素是個(gè)樹型結(jié)構(gòu)
children 代表對(duì)象的子節(jié)點(diǎn)數(shù)組-->
document.all.tbl.children(0).children(0).innerHTML解釋
document.all.tbl.children(0)定位到table的第一個(gè)子節(jié)點(diǎn)<tbody>
document.all.tbl.children(0).children(0)定位到table的第一個(gè)子節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)<tr>,打印結(jié)果<td> 行1列1 </td><td>行1列2 </td>
document.all.tbl.children(0).children(1).innerHTML,打印結(jié)果<td> 行2列1 </td><td>行2列2 </td>
document.all.tbl.children(0).children(1).children(0).innerHTML 打印結(jié)果行2列2
<!--fistChild,lastChild示例-->
<html>
<body>
<table id="tbl">
<tbody> <tr id="tr1"> <td> 行1列1 </td><td>行1列2 </td></tr>
<tr> <td="tr2"> 行2列1 </td><td>行2列2 </td></tr>
</tbody>
</table>
<input onclick="alert(document.all.tbl.firstChild.firstChild.innerHTML)" value="children(0)" type="button">
<input onclick="alert(document.all.tbl.firstChild.lastChild.innerHTML)" value="children(1)" type="button">
<input onclick="alert(document.all.tbl.firstChild.lastChild.firstChild.innerHTML)" value="children(2)" type="button">
<div id=test>
<a></a>
<table></table>
</div>
<script>
alert(test.firstChild.tagName)
alert(test.lastChild.tagName)
</script>
</body>
</html>
document.all.tbl.firstChild定位到table的第一個(gè)子節(jié)點(diǎn)<tbody>
document.all.tbl.firstChild.firstChild定位到table的第一個(gè)子節(jié)點(diǎn)<tbody>
的第一個(gè)子節(jié)點(diǎn)<tr id="tr1">
document.all.tbl.firstChild.firstChild.innerHTML打印結(jié)果是<td> 行1列1 </td><td>行1列2 </td>
document.all.tbl.firstChild.lastChild定位到table的第一個(gè)子節(jié)點(diǎn)<tbody>
的最后子節(jié)點(diǎn)<tr id="tr2">
document.all.tbl.firstChild.lastChild.innerHTML打印結(jié)果是<td="tr2"> 行2列1 </td><td>行2列2 </td>
document.all.tbl.firstChild.lastChild.firstChild.innerHTML 打印結(jié)果是
行2列2
相關(guān)文章
由于前端開發(fā)的火熱和一些IT巨頭公司 對(duì) web前端開發(fā)人員的需求旺盛，讓越來越多的人轉(zhuǎn)入前端。今天就為大家分享了一份Web前端開發(fā)書單，希望大家喜歡2017-10-10
HTTP Response Splitting 攻擊主要說明的是兩個(gè)問題2008-12-12
這篇文章主要為大家詳細(xì)介紹了原生Javascript和jQuery做輪播圖簡單例子,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
js求數(shù)組最大值的八種具體實(shí)現(xiàn)方法
數(shù)組如何求最大值,想必很多的朋友都不會(huì)吧,下面這篇文章主要給大家介紹了關(guān)于使用js求數(shù)組最大值的八種方法具體實(shí)現(xiàn)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
本篇文章主要是對(duì)js判斷字符是否是漢字的兩種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
網(wǎng)站導(dǎo)致瀏覽器崩潰的原因總結(jié)(多款瀏覽器) 推薦
對(duì)于訪客，如果登錄您網(wǎng)站，瀏覽器就立刻崩潰，我想這對(duì)誰都是無法容忍的，對(duì)此總結(jié)了網(wǎng)站導(dǎo)致瀏覽器崩潰的原因2010-04-04
這篇文章主要介紹了微信小程序3種位置API的使用方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了jsPDF如何導(dǎo)出pdf，不過其貌似不支持中文,需要的朋友可以參考下2014-05-05
本文將介紹瀏覽器解壓和服務(wù)器解壓兩種在線解壓ZIP文件的方案。幫助大家用JavaScript實(shí)現(xiàn)在線解壓，感興趣的朋友可以參考下2021-05-05
js判斷兩個(gè)數(shù)組相等的5種方法實(shí)例
再最近的一次實(shí)際項(xiàng)目開發(fā)中,又遇到了需要對(duì)兩個(gè)數(shù)組內(nèi)容進(jìn)行比較的需求,索性整理下,這篇文章主要給大家介紹了關(guān)于js判斷兩個(gè)數(shù)組相等的5種方法,需要的朋友可以參考下2022-05-05