如何使用JS獲取當(dāng)前節(jié)點(diǎn)的兄弟/父/子節(jié)點(diǎn)
JS獲取當(dāng)前節(jié)點(diǎn)的方式:
通過事件監(jiān)聽器獲取當(dāng)前節(jié)點(diǎn):
<button onclick="fun(this)"></button> function fun(obj){ // obj就是當(dāng)前節(jié)點(diǎn) //可以通過.父節(jié)點(diǎn)/子節(jié)點(diǎn)的方式來獲取節(jié)點(diǎn)。 obj.nextSiling; }
1.getElementById()----通過ID獲取
2.getElementsByTagName()--通過標(biāo)簽名獲取
3.getElementsByClassName()--通過class(類名)獲取
4.querySelector()----()號里可以根據(jù)css選擇器的形式獲取,獲取第一個
5.querySelectorAll()--同上,獲取所有""里的內(nèi)容,返回的是一個“偽數(shù)組”
6.getElementsByName()---通過name屬性來獲取表單元素,一般也只用于表單元素
示例:
<ul> <li>li1</li> <li id="li2">li2</li> <li class="li3">li3</li> <li id="li4">li4</li> <li class="li5">li5</li> </ul> <input type="text" name="abc" value="你說呢"> <script> //通過id獲取 let li2=document.getElementById("li2"); // li2變成紅色 li2.style.color="red"; //通過class獲取,返回的是一個偽數(shù)組 let li3=document.getElementsByClassName("li3"); //li3變成綠色 li3[0].style.color="green"; //通過標(biāo)簽名獲取,獲取的也是一個偽數(shù)組 let li = document.getElementsByTagName("li"); //第一個li變成粉色 li[0].style.color="pink"; //通過querySelector獲取 let li4=document.querySelector("#li4"); li4.style.color="blue"; //通過querySelectorAll()獲取 let li5=document.querySelectorAll(".li5"); //class為li5的第一個顏色變?yōu)樽仙? li5[0].style.color="purple"; //通過name屬性獲取表單元素 let abc=document.getElementsByName("abc"); //name為abc的第一個元素字體變?yōu)榧t色 abc[0].style.color="red"; </script>
獲取子節(jié)點(diǎn):
1.通過一個一個.獲取節(jié)點(diǎn):
2.通過childNodes獲取子節(jié)點(diǎn):返回的也是子節(jié)點(diǎn)集合,是一個數(shù)組的格式。他會把換行和空格也當(dāng)成是節(jié)點(diǎn)信息。
3.通過children獲取,不過他也是數(shù)組,按照數(shù)組的形式訪問就行
4.獲取第一個子節(jié)點(diǎn):firstChild,firstElementChild
5.獲取最后一個子節(jié)點(diǎn):lastChild,lastElementChild
//通過每一層.獲取節(jié)點(diǎn): let b=document.getElementById("li01").querySelector("span"); alert(b.innerHTML); //通過childNodes獲取子節(jié)點(diǎn):返回的也是子節(jié)點(diǎn)集合,是一個數(shù)組的格式。他會把換行和空格也當(dāng)成是節(jié)點(diǎn)信息。 let c=document.getElementById("li02").childNodes; alert(c[0].innerHTML); //通過children獲取,不過他也是數(shù)組,按照數(shù)組的形式訪問就行 let d=document.getElementById("li03").children[0]; alert(d.innerHTML); //獲取第一個子節(jié)點(diǎn):firstChild let e=document.getElementById("li04").firstChild;//會匹配換行和空格 let f=document.getElementById("li04").firstElementChild; //獲取最后一個子節(jié)點(diǎn): let g=document.getElementById("li05").lastChild;//會匹配換行和空格 let h=document.getElementById("li05").lastElementChild;
獲取父節(jié)點(diǎn):
1.獲取單個父節(jié)點(diǎn):parentNode,parentElement
let i=document.getElementById("li05").parentNode; let j=document.getElementById("li05").parentElement;
2.獲取所有父節(jié)點(diǎn):offsetParent。返回的是個偽數(shù)組
let k=document.getElementById("li05").offsetParent;
獲取兄弟節(jié)點(diǎn)
1.通過獲取父節(jié)點(diǎn)再獲取子節(jié)點(diǎn)來獲取兄弟節(jié)點(diǎn):
var brother1 = document.getElementById("li05").parentNode.children[1];
2.獲取上一個節(jié)點(diǎn)
var brother2=document.getElementById("li05").previousElementSibling; var brother2=document.getElementById("li05").previousSibling;
3.獲取下一個節(jié)點(diǎn)
var brother4 = document.getElementById("test").nextElementSibling; var brother5 = document.getElementById("test").nextSibling;
總結(jié)
到此這篇關(guān)于如何使用JS獲取當(dāng)前節(jié)點(diǎn)的兄弟/父/子節(jié)點(diǎn)的文章就介紹到這了,更多相關(guān)JS獲取當(dāng)前節(jié)點(diǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript伸縮菜單欄實(shí)現(xiàn)代碼分享
這篇文章主要介紹了javascript伸縮菜單欄實(shí)現(xiàn)代碼,點(diǎn)擊標(biāo)題顯示下級菜單,節(jié)約了空間,使頁面排版更加緊湊,感興趣的小伙伴們可以參考一下2015-11-11微信小程序 獲取手機(jī)號 JavaScript解密示例代碼詳解
這篇文章主要介紹了微信小程序 獲取手機(jī)號 JavaScript解密的示例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05詳解CocosCreator系統(tǒng)事件是怎么產(chǎn)生及觸發(fā)的
這篇文章主要介紹了CocosCreator系統(tǒng)事件是怎么產(chǎn)生及觸發(fā)的,雖然內(nèi)容不少,但是只要一點(diǎn)點(diǎn)抽絲剝繭,具體分析其內(nèi)容,就會豁然開朗2021-04-04詳解webpack中的hash、chunkhash、contenthash區(qū)別
這篇文章主要介紹了詳解webpack中的hash、chunkhash、contenthash區(qū)別,詳細(xì)的介紹了hash、chunkhash、contenthash的用法和區(qū)別,有興趣的可以了解一下2018-01-01