Class 查找嵌套标记名并在 Javascript 中赋值的名称

Question

我有以下标记无法修改：

<li class="campID">
    <label for="input_2_14">Name</label>
    <div>
        <input name="input_14" id="input_2_14" type="text" value="" class="medium" tabindex="11">
     </div>
</li>

我想 select 输入并使用普通 JS 更改其值（假设 jQuery 不可用）。

我不能使用输入的名称或 ID，因为它们是动态的并且会改变。

我尝试了以下方法，但似乎不起作用：

(function(){
  var listElement = document.getElementsByClassName('campID');
  var myInput = listElement.getElementsByTagName('input');
  myInput[0].value = 'John';
})();

Answer 1

如果您的目标是 IE8 及更高版本，则：

document.querySelector("li.campID input").value="John";

其他:

单独假设第一个 LI 和输入：

var liListItem = document.getElementsByClassName("campID")[0],
    inputElement = liListItem.getElementsByTagName("input")[0];
    inputElement.value = "John";

document.getElementsByClassName("campID") returns 你的节点列表。所以你可能需要循环并做。

Answer 2

querySelector() 和 querySelectorAll() 完成 CSS select 或.

querySelector() returns only first matching Element node within Nodes.

Whereas

querySelectorAll() returns a list of Node containing all matching Element nodes within the Nodes.

您必须使用 querySelectorAll() select或用于 select 多种用途，

var in =  document.querySelectorAll(".campID input");
in.value = 'John';
console.log(in);

控制台 return:

[input#input_2_14.medium, value: "John", item: function]

Answer 3

我知道已经很久了。只是想发布对我有用的解决方案。对于以下 HTML

`
    <li class="list-summary-item">
        <span>Registration number</span>
        <span class="reg-mark">LT08 YJA</span>
    </li>
    <li class="list-summary-item">
        <span>Colour</span>
        <span><strong>BLACK</strong></span>
    </li>
    <li class="list-summary-item">
        <span>Make</span>
        <span><strong>VAUXHALL</strong></span>
    </li>
`

 <br>
document.getElementsByClassName('list-summary-item')[2].getElementsByTagName('span')[1].getElementsByTagName('strong')[0].innerHTML <br>

给沃克斯豪尔.

Class 查找嵌套标记名并在 Javascript 中赋值的名称

Class name to find nested tagname and assign value in Javascript

javascript

getelementsbytagname

getelementsbyclassname