如何根據此跨度的值選擇此輸入？

Question

我有這個<span>What's your name?</span>在這里我想選擇輸入[@placeholder='Insira sua resposta']（見下面的 HTML），但我不知道如何從跨度到那里。 我無法從跨度返回到跨度和輸入的頂部共享父級。 我試過： //div[@class="office-form-question-content office-form-theme-focus-border"]/*/span[.="What\\'s your name?"]'但是返回空。 我嘗試通過//span[.="What\\'s your name?"]/../*/div[@class="office-form-question-content office-form-theme-focus-border"]'也不起作用。 我怎樣才能做到這一點？

HTML：

<div class="office-form-question-content office-form-theme-focus-border">
  <div aria-live="assertive" role="alert"></div>
  <div class="question-title-box">
    <div>
      <div aria-level="2" class="office-form-question-title" id="question1-title" role="heading"><span class="ordinal-number">1.</span><span>What's your name?</span><span class="required-star"></span>
        <div><span class="accessibility-reader-no-display" id="question1-required">Requer resposta</span></div>
        <div><span class="accessibility-reader-no-display" id="question1-questiontype">Texto de linha única</span></div>
      </div>
    </div>
  </div>
  <div class="office-form-question-element">
    <div class="student-feedback-view-short-text-field-with-correctness">
      <div>
        <div class="office-form-textfield"><input class="office-form-question-textbox office-form-textfield-input form-control border-no-radius" aria-labelledby="question1-title question1-required question1-questiontype" placeholder="Insira sua resposta" spellcheck="true" maxlength="4000"
            value=""></div>
      </div>
    </div>
  </div>
</div>

Answer 1

很可能有一種更快、更簡單的方法來做到這一點，但是我在糟糕的 1.0 時代學習了 XPath，所以這就是我所知道的。 在下面的 XPath 中，我獲得了內容的span ，使用ancestor軸上升到包含的div ，然后下降回到input 。 document.evaluate和iterateNext只是為了演示它的工作iterateNext 。

 var input = document.evaluate(`//span[text() = "What's your name?"]/ancestor::div[@class="office-form-question-content office-form-theme-focus-border"]//input[@class="office-form-question-textbox office-form-textfield-input form-control border-no-radius"]`, document, null, XPathResult.ANY_TYPE, null ); console.log(input.iterateNext());

 <div class="office-form-question-content office-form-theme-focus-border"> <div aria-live="assertive" role="alert"></div> <div class="question-title-box"> <div> <div aria-level="2" class="office-form-question-title" id="question1-title" role="heading"> <span class="ordinal-number">1.</span> <span>What's your name?</span> <span class="required-star"></span> <div><span class="accessibility-reader-no-display" id="question1-required">Requer resposta</span></div> <div><span class="accessibility-reader-no-display" id="question1-questiontype">Texto de linha única</span></div> </div> </div> </div> <div class="office-form-question-element"> <div class="student-feedback-view-short-text-field-with-correctness"> <div> <div class="office-form-textfield"> <input class="office-form-question-textbox office-form-textfield-input form-control border-no-radius" aria-labelledby="question1-title question1-required question1-questiontype" placeholder="Insira sua resposta" spellcheck="true" maxlength="4000" value=""> </div> </div> </div> </div> </div>