Question

所以html看起来像这样

<div class="col-12">
<label>Enter your post code <span class="text-danger">*</span> </label>
 <input type="text" class="form-control" id="form_zipbox" name="custom[map-zip]" value="" autocomplete="off">
</div>

我正在尝试访问标签并替换文本。

col-12选择器不是唯一的，因此我一直在尝试使用id作为输入的目标。

我尝试了以下

e = document.getElementById("form_zipbox");
e.closest("label"); // returns null
e.closet("div > childElement"); // null. As does child, childNode, just for sake of trying.

如何访问标签。

e.closest("div"); // Does return col-12 obviously

只是无法拥有此标签。谁能指出我正确的方向。顺便说一句，它必须是普通js，而不是jquery。谢谢

非常感谢您的帮助。

Answer 1

您可以使用closest('div')和firstElementChild来获取标签。使用纯JavaScript

let e = document.getElementById("form_zipbox");
let div = e.closest("div").firstElementChild;
console.log(div)

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="col-12">
  <label>Enter your post code <span class="text-danger">*</span> </label>
  <input type="text" class="form-control" id="form_zipbox" name="custom[map-zip]" value="" autocomplete="off">
</div>

您也可以使用输入的previousElementSibling直接定位到标签。

let e = document.getElementById("form_zipbox");
console.log(e.previousElementSibling)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="col-12">
  <label>Enter your post code <span class="text-danger">*</span> </label>
  <input type="text" class="form-control" id="form_zipbox" name="custom[map-zip]" value="" autocomplete="off">
</div>

使用JavaScript定位没有选择器的标签元素

1 个答案: