时间戳

首页 > 解决方案 > 如何根据这个跨度的值选择这个输入？

javascript - 如何根据这个跨度的值选择这个输入？

问题描述

我有这个<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?"]'但返回null。我尝试从 span 回到顶部 div//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>

标签： javascripthtmlxpath

解决方案

很可能有一种更快、更简单的方法来做到这一点，但我在糟糕的 1.0 年代学习 XPath，所以这就是我所知道的。在下面的 XPath 中，我得到了span带有内容的 ，使用ancestor轴上升到包含div，然后下降回到input. document.evaluateanditerateNext只是为了展示它的工作原理。

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>

推荐阅读