DOMの要素を選択した兄弟でない要素を選択

Question

span要素が選択されていて、に行きたいです。私はnext()、nextAll()、nextElementSiblingを使って試しました。しかし、input要素はspanの兄弟ではないため、機能しません。他の方法で入力要素を選択できますか？以下は

私のコードです：

<span>This element is selected via javascript</span> 

<div> 
    <a href="some link"></a> 
</div> 


<div class="mb_content"> 
    5 attachement 
    <br /> 
    <span class="error_star mr_1"><b>Size:5 MB</b></span> 
</div> 

<div class="checker f_left"> 
    <label for="rec_787128222">&nbsp;</label> 
    <input type="checkbox" class="mb_check" /><!--i want to select this--> 
</div> 

PS：実際の構造が少し異なっているが、私はここでそれを上に貼り付けることはできません。これはレプリカの一種です。

Answer 1

選択したDOM要素の親要素に移動し、入力を選択することができます。

はこのようにそれを試してみてください：あなたは本当にnextSibling()を利用したい場合は...

// <the element> . <the parent> . <select the input element> 
element.parentNode.querySelector('.mb_check') 

Answer 2

nullのための任意のチェックなし

var el = document.querySelector("#foo").nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.children[1]; 
 

 
el.style.display = 'none';

<span id="foo">This element is selected via javascript</span> 
 

 
<div> 
 
    <a href="some link"></a> 
 
</div> 
 

 

 
<div class="mb_content"> 
 
    5 attachement 
 
    <br /> 
 
    <span class="error_star mr_1"><b>Size:5 MB</b></span> 
 
</div> 
 

 
<div class="checker f_left"> 
 
    <label for="rec_787128222">&nbsp;</label> 
 
    <input type="checkbox" class="mb_check" /> 
 
    <!--i want to select this--> 
 
</div>

Answer 3

を、あなたはこれを試すことができます。

document.querySelectorAll('.error_star.mr_1')[0].parentNode.nextElementSibling.children[1];