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