このバニラのjavascript DOMトラバーサルを実現するためのより良い方法は？

Question

私はMarketoの自動生成フォームをいくつか用意しています。つまり、提供されているものを回避することを余儀なくされています。値が1つのみのチェックボックスがある場合は、親ラベルにクラスを追加する必要があります（そのラベルを示すコメントがあります）。

問題のチェックボックスは、 "explicitOptin"だけでなく、任意のフィールドである可能性があります。そのため、私はそれに基づいて選択することはできません（少なくとも初期ではありません）。私はまた、誤って2つ以上の値を持つチェックボックスを選択しないようにする必要があります。ちょうど一緒のparentNodeやpreviousSiblingはメソッドを架線より良い方法がなければならないように私は感じ

var ckBox = document.querySelector('.mktoCheckboxList .mktoField:only-of-type').parentNode.previousSibling.previousSibling; 
if (ckBox.className.indexOf('mktoSingleCheckbox') == -1) { 
    ckBox.className += ' mktoSingleCheckbox'; 
} 

<form id="mktoForm_1690" novalidate="novalidate" class="mktoForm mkt*emphasized text*oHasWidth mktoLayoutLeft" data-styles-ready="true"> 
<div class="mktoFormRow"> 
    <div class="mktoFormRow"> 
     <div class="mktoFieldDescriptor mktoFormCol"> 
      <div class="mktoOffset"></div> 
      <div class="mktoFieldWrap"> 
       <label for="hazmatchooseallthatapply" class="mktoLabel mktoHasWidth"> 
        <div class="mktoAsterix">*</div>Hazmat (choose all that apply):</label> 
       <div class="mktoGutter mktoHasWidth"></div> 
       <div class="mktoLogicalField mktoCheckboxList mktoHasWidth"> 
        <input name="hazmatchooseallthatapply" id="mktoCheckbox_9480_0" type="checkbox" value="Hazardous Materials" class="mktoField"> 
        <label for="mktoCheckbox_9480_0">Hazardous Materials</label> 
        <input name="hazmatchooseallthatapply" id="mktoCheckbox_9480_1" type="checkbox" value="Hazardous Waste" class="mktoField"> 
        <label for="mktoCheckbox_9480_1">Hazardous Waste</label> 
        <input name="hazmatchooseallthatapply" id="mktoCheckbox_9480_2" type="checkbox" value="Fuel Tanker" class="mktoField"> 
        <label for="mktoCheckbox_9480_2">Fuel Tanker</label> 
       </div> 
       <div class="mktoClear"></div> 
      </div> 
      <div class="mktoClear"></div> 
     </div> 
     <div class="mktoClear"></div> 
    </div> 
    <div class="mktoClear"></div> 
</div> 
<div class="mktoFormRow"> 
    <div class="mktoFieldDescriptor mktoFormCol"> 
     <div class="mktoOffset"></div> 
     <div class="mktoFieldWrap"> 
      <!--This label directly below is the element that needs the new class--> 
      <label for="explicitOptin" class="mktoLabel mktoHasWidth mktoSingleCheckbox"> 
       <div class="mktoAsterix">*</div>Yes, please sign me up to receive information from PrePass by email.</label> 
      <div class="mktoGutter mktoHasWidth"></div> 
      <div class="mktoLogicalField mktoCheckboxList mktoHasWidth mktoValid"> 
       <!-- This is the single checkbox input that I am selecting with my javascript --> 
       <input name="explicitOptin" id="explicitOptin" type="checkbox" value="yes" class="mktoField"> 
       <label for="explicitOptin"></label> 
      </div> 
      <div class="mktoClear"></div> 
     </div> 
     <div class="mktoClear"></div> 
    </div> 
    <div class="mktoClear"></div> 
</div> 

：ここ

私が思いついたのjavascriptです。

提案がありますか？私は使用しているCSSセレクタを使用する代わりに、ID値を取得し、そのIDの値を持つ要素を検索することも考えられます。多分、parentNodeとpreviousSiblingsを一緒にストリングするのは、行く方法です...？

Answer 1

この記事を書いている時点では、element.classNameの代わりにelement.classListを使用している点を除いて、あなたの解決策は最適なルートのようです。

オプションの再フォーマットは、この（長い）ワンライナーにつながる：

document.querySelector('.mktoCheckboxList .mktoField:only-of-type') 
    .parentNode.previousSibling.previousSibling 
    .classList.add('mktoSingleCheckbox'); 

が将来するために探して、ブラウザでは、私たちは <input>に関連付けられたラベルを収集するために HTMLInputElement.labels APIを使用できるようになります。

#                 WOW! 
document.querySelector('.mktoCheckboxList .mktoField:only-of-type').labels[0] 
    .classList.add('mktoSingleCheckbox'); 

残念ながら、このAPIのためのブラウザのサポートは今非常に限られており、手動で関連付けられているラベルを取得しようとすると、現在の方法よりもおそらく面倒です。

希望すると便利です。