当没有 id 或 class 时，使用 javascript 更改标签值

Question

你能帮我用 javascript 更改值吗，但是代码没有 ID 或 class 这里是代码：

<label for="flights-origin-prepop-whitelabel_en">Origin</label>

我想用不同的词更改 "Origin"。

我的一些代码示例：

<button role="flights_submit" type="submit">Search</button>
<div class="mewtwo-flights-destination">
<label for="flights-destination-prepop-whitelabel_en">Destination</label>
<input type="text" 
       name="destination_name" 
       autocomplete="off" required="" 
       id="flights-destination-prepop-whitelabel_en" 
       placeholder="Destination" 
       data-label="Destination" 
       role="flights-destination" 
       data-modal-modifier="whitelabel_en" 
       data-placeholder-initialized="true">

<input type="hidden" 
       name="destination_iata" 
       id="flights-destination-whitelabel_en" value="">
</div>

如何更改此占位符 "Destination" 和标签文本目标？

谢谢

Answer 1

是的，当然可以，您可以将 querySelector 与标签选择器一起使用，包括数据

console.log(document.querySelector("label[for='flights-destination-prepop-whitelabel_en']"))

<button role="flights_submit" type="submit">Search</button>
<div class="mewtwo-flights-destination">
<label for="flights-destination-prepop-whitelabel_en">Destination</label>
<input type="text" 
       name="destination_name" 
       autocomplete="off" required="" 
       id="flights-destination-prepop-whitelabel_en" 
       placeholder="Destination" 
       data-label="Destination" 
       role="flights-destination" 
       data-modal-modifier="whitelabel_en" 
       data-placeholder-initialized="true">

<input type="hidden" 
       name="destination_iata" 
       id="flights-destination-whitelabel_en" value="">
</div>

Answer 2

您可以更改原始文本：

document.querySelector("label[for='flights-origin-prepop-whitelabel_en']").textContent = 'New Text';

Answer 3

您可以使用查找 for 属性及其特定值的 "attribute selector" 找到正确的元素。

var btn = document.querySelector("button");
btn.addEventListener("click", function(){
  var el = document.querySelector("[for=flights-destination-prepop-whitelabel_en]");
  el.textContent = "New Value";
  
  var input = document.getElementById("flights-destination-prepop-whitelabel_en");
  input.setAttribute("placeholder","New Value");

  
});

<button role="flights_submit" type="button">Search</button>
<div class="mewtwo-flights-destination">
<label for="flights-destination-prepop-whitelabel_en">Destination</label>
<input type="text" 
       name="destination_name" 
       autocomplete="off" required="" 
       id="flights-destination-prepop-whitelabel_en" 
       placeholder="Destination" 
       data-label="Destination" 
       role="flights-destination" 
       data-modal-modifier="whitelabel_en" 
       data-placeholder-initialized="true">

<input type="hidden" 
       name="destination_iata" 
       id="flights-destination-whitelabel_en" value="">
</div>

Answer 4

第一步是设置一个包含您要定位的元素的数组，在本例中为 label。然后，您将使用 for 循环遍历该数组，以查看 label 的 textContent 是否是您想要更改的内容。最后，一旦您 'hooked' 有了所需的标签，您就可以根据需要更改它的属性。另请注意 textContent 方法不兼容跨浏览器，因此我包含了一个三元脚本，多亏了 this handy Whosebug post .

HTML:

<button role="flights_submit" type="submit">Search</button>
<br/>
<br/>
<div class="mewtwo-flights-destination">
    <label for="flights-destination-prepop-whitelabel_en">Destination</label>

    <input type="text" name="destination_name" autocomplete="off" required="" id="flights-destination-prepop-whitelabel_en" placeholder="Destination" data-label="Destination" role="flights-destination" data-modal-modifier="whitelabel_en" data-placeholder-initialized="true">
    <br/>
    <br/>
    <label for="somethingElse">OtherLabel</label>
    <input type="text" id='somethingElse'>

    <input type="hidden" name="destination_iata" id="somethingElse" value="">
</div>

JavaScript:

//
//

var labelArray = document.getElementsByTagName('LABEL');
console.log(labelArray);
var textToChange = 'Destination';

for (var i = 0; i < labelArray.length; i++) {
    var currentLabel = labelArray[i]
    var text = ('innerText' in labelArray[i]) ? 'innerText' : 'textContent';
    if (currentLabel[text] === 'Destination') {
        var matchingInput = document.getElementById(currentLabel.htmlFor);
        var newText = 'changedDestination';
        var newPlaceHolder = 'changedPlaceHolder';

        currentLabel[text] = newText;
        matchingInput.placeholder = newPlaceHolder;
    }
}

jsfiddle Example

//
//

var labelArray = document.getElementsByTagName('LABEL');
console.log(labelArray);
var textToChange = 'Destination';

for (var i = 0; i < labelArray.length; i++) {
  var currentLabel = labelArray[i]
  var text = ('innerText' in labelArray[i]) ? 'innerText' : 'textContent';
  if (currentLabel[text] === 'Destination') {
    var matchingInput = document.getElementById(currentLabel.htmlFor);
    var newText = 'changedDestination';
    var newPlaceHolder = 'changedPlaceHolder';

    currentLabel[text] = newText;
    matchingInput.placeholder = newPlaceHolder;
  }
}

<button role="flights_submit" type="submit">Search</button>
<br/>
<br/>
<div class="mewtwo-flights-destination">
  <label for="flights-destination-prepop-whitelabel_en">Destination</label>

  <input type="text" name="destination_name" autocomplete="off" required="" id="flights-destination-prepop-whitelabel_en" placeholder="Destination" data-label="Destination" role="flights-destination" data-modal-modifier="whitelabel_en" data-placeholder-initialized="true">
  <br/>
  <br/>
  <label for="somethingElse">OtherLabel</label>
  <input type="text" id='somethingElse'>

  <input type="hidden" name="destination_iata" id="somethingElse" value="">
</div>

当没有 id 或 class 时，使用 javascript 更改标签值

change labels value with javascript, when no id or class

javascript

selector