如何在javascript中查找目標ID？

Question

如果我們有這樣的

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

我們怎樣才能得到這個ID，而無需使用靜態的HTML它的代碼？ 例如，我們可以寫在裏面數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

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); 
 
    } 
 
}

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

當您通過每個元素迭代，有沒有點取由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 return collection element not element。 W3：

getElementsByClassName（）方法返回文檔中所有具有指定類名稱的元素的集合，作爲NodeList對象。

所以，你可以嘗試：

document.getElementsByClassName（ 'MyClass的'）[0] .childNodes

，或者如果需要循環槽document.getElementsByClassName（ 'MyClass的'）。

而你的問題並不清楚。這段代碼可以幫助你嗎？

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

<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>

Answer 3

getElementsByClassName返回HTMLCollection（類似對象陣列上），未定位返回的集合的元素。

實際上，你可以簡單地使用children道具與querySelector然後查找與'INPUT'一個nodeName元素。

下面是一個例子。

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>