JS簡單獲得節(jié)點元素的方法示例
更新時間：2018年02月10日 11:49:35 作者：群女神的熊寶
這篇文章主要介紹了JS簡單獲得節(jié)點元素的方法,結(jié)合實例形式分析了javascript獲取頁面節(jié)點元素及修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了JS簡單獲得節(jié)點元素的方法。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dbjr.com.cn - JS幾種獲得節(jié)點元素的方法</title>
<script type="application/javascript">
/* window.onload=function(){//文檔就緒函數(shù) 表示當(dāng)文檔加載完成（圖片視頻等全部加載完成）
var d=document.getElementById('d');
//document.getElementByName();//得到數(shù)組 通過過下標(biāo)調(diào)用
d.innerHTML='asddddddddddd';
//除通過Id查找（即getElementById）外其他幾種查找方式返回的都是數(shù)組，通過下表調(diào)用
}*/
window.onload=function(){
//找到Id為t1的td元素
var t1=document.getElementById('t1');
//獲取父節(jié)點元素tr 通過parentNode
var tr=t1.parentNode;
//通過style屬性設(shè)置背景顏色
tr.style.backgroundColor='green';
//獲取tr標(biāo)簽的最后一個子元素
var t3=tr.lastChild;
//通過innerHTML屬性改變元素內(nèi)容
t3.innerHTML='qwer';
}
</script>
</head>
<body>
<table>
<tr> <td id="">1</td> <td>2</td> <td>3</td> </tr>
<tr> <td id="t1">1</td> <td>2</td> <td>3</td> </tr
<tr> <td>1</td> <td>2</td> <td>3</td> </tr>
</table>
</body>
</html>
運行效果：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
javascript實現(xiàn)div的顯示和隱藏的小例子
這篇文章介紹了在JS中實現(xiàn)DIV顯示和隱藏的實例，需要的朋友可以參考一下2013-06-06
openlayers實現(xiàn)圖標(biāo)拖動獲取坐標(biāo)
這篇文章主要為大家詳細(xì)介紹了openlayers實現(xiàn)圖標(biāo)拖動獲取坐標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
本文主要介紹了小程序?qū)崿F(xiàn)事件綁定的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
下面小編就為大家分享一篇Js判斷H5上下滑動方向及滑動到頂部和底部判斷的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
對Layer彈窗使用及返回數(shù)據(jù)接收的實例詳解
今天小編就為大家分享一篇對Layer彈窗使用及返回數(shù)據(jù)接收的實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Ajax請求通常不支持瀏覽器的后退按鈕,因為它們是異步的,不會導(dǎo)致頁面重新加載(刷新),但如果你想要用戶能夠通過瀏覽器的后退按鈕回到之前的頁面狀態(tài),你可以通過幾種方法來解決這個問題,感興趣的朋友跟隨小編一起看看吧2024-10-10
JavaScript中無法通過div.style.left獲取值的解決方法
這篇文章主要介紹了JavaScript中無法通過div.style.left獲取值的問題分析及解決方法,需要的朋友可以參考下2017-02-02
我們大家都知道在寫java和c時，必須要在語句后加分號，否則編譯通不過。而js不同，存在自動分好插入機制，下文簡稱ASI。它會給源代碼的 token 流自動插入分號。下面這篇文章我們就來談?wù)凧avascript的自動分號插入(ASI)機制。2016-09-09
下面小編就為大家?guī)硪黄狫S中位置與大小的獲取方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了Javascript模擬實現(xiàn)new原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03