Question

如果我们有像这样的HTML代码

<button onclick="teta()">click me !</button>
<br />
<div class="myclass">
<input type="text"  id="id1" />
</div>

如何在没有静态使用的情况下获取此ID呢？例如，我们可以使用此代码在其中写入数字100

document.getElementById('id1').value = 100;

这是真的

但是使用父类和id的动态代码我们如何才能做到这一点？我尝试使用此代码执行此操作

function teta() {
    var myvar = document.getElementsByClassName('myclass').childNodes;
                for (var i = 0; i < myvar.length; i++) {
                    myvar[i].addEventListener('', function () {
                        document.getElementById(this.id(/^id/)).value = 100;
                    }, false);
}

但这是错误的

Answer 1

＆＃13;

function teta() {
    var myvar = document.getElementsByClassName('myclass')[0].childNodes;
    for (var i = 0; i < myvar.length; i++) {
        myvar[i].addEventListener('click', function () {
           this.value = 100;
        }, false);
   }
}

＆＃13;

<button onclick="teta()">click me !</button>
<br />
<div class="myclass">
<input type="text"  id="id1" />
</div>

＆＃13;

当你遍历每个元素时，没有必要通过id获取元素。您只需使用this关键字来引用输入。这里的[0]是选择具有指定类名的第一个节点。

function teta() {
    var myvar = document.getElementsByClassName('myclass')[0].childNodes;
    for (var i = 0; i < myvar.length; i++) {
        myvar[i].addEventListener('click', function () {
           this.value = 100;
        }, false);
   }
}

更新：

document.getElementsByClassName()返回一个数组。因此，我们使用索引0来选择第一个匹配结果。

您的输入名称为id1。要获得它的价值，你可以简单地写一下：

var value = document.getElementById("id1").value;

此处，document.getElementById会返回输入框的引用，.value会返回它的值。

Answer 2

getElementsByClassName返回元素非元素的集合。   从W3开始：

getElementsByClassName（）方法返回文档中具有指定类名的所有元素的集合，作为NodeList对象。

所以你可以尝试：

document.getElementsByClassName（＆＃39; MyClass的＆＃39;）[0] .childNodes

如果需要，

或循环使用document.getElementsByClassName（＆＃39; myclass＆＃39;）。

你的问题不明确。这段代码可以帮到你吗？

＆＃13;

function teta(buttonEl) {
    var id = buttonEl.getAttribute('data-id');
    var value = buttonEl.getAttribute('data-value');
    document.getElementById('id'+id).value = value;
}

＆＃13;

<button onclick="teta(this)" data-id="1" data-value="100">click me 1!</button>
<br />
<button onclick="teta(this)" data-id="2" data-value="200">click me 2!</button>
<br />
<button onclick="teta(this)" data-id="3" data-value="300">click me 3!</button>

<br />
<br />

<div class="myclass">
  <input type="text"  id="id1" />
<br />
  <input type="text"  id="id2" />
<br />
  <input type="text"  id="id3" />
</div>

＆＃13;

Answer 3

getElementsByClassName会返回一个HTMLCollection（类似于对象的数组），您没有定位返回集合的元素。

您实际上只需将children道具与querySelector一起使用，然后查找nodeName 'INPUT'的元素。

这是一个例子。

function onInputFocus (evt) {
  this.value = 100;
}

function teta() {
  var children = document.querySelector('.myclass').children;
  [].slice.call(children).forEach(function(child) {
    if (child.nodeName === 'INPUT') {
      child.addEventListener('focus', onInputFocus)
    }
  })
}

input {
   display: block
}

<button onclick="teta()">click me !</button>
<br />
<div class="myclass">
  <label for="">input 1</label>
  <input type="text" />
  <label for="">input 2</label>
  <input type="text" />
  <label for="">input 3</label>
  <input type="text" />
  <label for="">input 4</label>
  <input type="text" />
</div>

如何在javascript中找到目标ID？

3 个答案: