選擇子節點（DOM）

-2

如何使用純Javascript選擇第二個<a>標籤？選擇子節點（DOM）

<div class="navigation"> 
    <a href="/page/2/">Prev</a> 
    <a href="/page/4/">Next</a> 
</div>

來源

2015-09-29 MartinDK81

有多種可能性：'document.querySelectorAll（」。導航 '）[1]'，'document.querySelector（' .navigation'）。children [1]'，'document.querySelectorAll（'。navigation a：nth-child（2）'）'，'document.getElementsByClassName（'navigation'）[0] .children [1]'。取決於你的用例。 – Xufox

使用DOM選擇器getElementsByClassName()。

返回值：包含類名稱的元素數組。

用getElementsByClassName選擇器的返回值替換[?]與目標的索引。例如，如果包含<a>標記的<div>標記是文檔中類名稱爲navigation的第一個元素，那麼它將位於返回數組的索引0（因爲它基於0），因此應該使用[0]作爲相應的元件。

使用.children屬性，他們的父節點返回子節點的HTMLCollection（在這種情況下<a>標籤）（在這種情況下<div>標籤）。

// JS

document.getElementsByClassName('navigation')[1].children[1];

// HTML

<div class="navigation"> 
    <a href="/page/1/">Prev</a> 
    <a href="/page/2/">Next</a> 
</div> 
<div class="navigation"> 
    <a href="/page/3/">Prev</a> 
    <a href="/page/4/">Next</a> (selected element) 
</div> 
<div class="navigation"> 
    <a href="/page/5/">Prev</a> 
    <a href="/page/6/">Next</a> 
</div> 
<div class="navigation"> 
    <a href="/page/7/">Prev</a> 
    <a href="/page/8/">Next</a> 
</div>

來源

2015-09-29 18:34:59 AmmarCSE

downvoter可以解釋他們爲什麼downvoted？或者這個懲罰是爲了回答這個問題嗎？ – AmmarCSE

使用'getElementsByTagName'根本不是特定的，您在整個文檔中選擇了所有''標籤......以及使用諸如此類的選擇器的性能下降。 –

@JordanDavis，非常好的一點。感謝您指出了這一點。感謝您不是匿名downvoter。 – AmmarCSE

選擇子節點（DOM）

回答

相關問題