在div標籤中通過id獲取元素的簡單方法？

Question

請原諒我，如果我重複這個問題。

我有一個div標籤內的所有元素都有不同的id，假設我已經獲得了div的引用，是否有任何簡單的方法通過它的id獲取元素而不迭代所有具有該div的元素？

這裏是我的樣本HTML：

<div id="div1" > 
    <input type="text" id="edit1" /> 
    <input type="text" id="edit2" /> 
</div> 
<div id="div2" > 
    <input type="text" id="edit1" /> 
    <input type="text" id="edit2" /> 
</div> 

Answer 1

你可以嘗試這樣的事情。

樣本標記。

<div id="div1" > 
    <input type="text" id="edit1" /> 
    <input type="text" id="edit2" /> 
</div> 
<div id="div2" > 
    <input type="text" id="edit3" /> 
    <input type="text" id="edit4" /> 
</div> 

的JavaScript

function GetElementInsideContainer(containerID, childID) { 
    var elm = {}; 
    var elms = document.getElementById(containerID).getElementsByTagName("*"); 
    for (var i = 0; i < elms.length; i++) { 
     if (elms[i].id === childID) { 
      elm = elms[i]; 
      break; 
     } 
    } 
    return elm; 
} 

演示：http://jsfiddle.net/naveen/H8j2A/

通過NNNNNN

function GetElementInsideContainer(containerID, childID) { 
    var elm = document.getElementById(childID); 
    var parent = elm ? elm.parentNode : {}; 
    return (parent.id && parent.id === containerID) ? elm : {}; 
} 

演示建議一種更好的方法，包括：http://jsfiddle.net/naveen/4JMgF/

稱呼它

var e = GetElementInsideContainer("div1", "edit1"); 

Answer 2

你不想這樣做。具有相同的id以上的多個元素是無效的HTML。瀏覽器不會很好地處理這些問題，並且您將會遇到未定義的行爲，這意味着當您通過該ID選擇某個元素時，您不知道瀏覽器會給您什麼，它可能無法預測。

你應該使用一個類，或者只是遍歷輸入和跟蹤索引。

嘗試這樣：

var div2 = document.getElementById('div2'); 
for(i = j = 0; i < div2.childNodes.length; i++) 
    if(div2.childNodes[i].nodeName == 'INPUT'){ 
     j++; 
     var input = div2.childNodes[i]; 
     alert('This is edit'+j+': '+input); 
    } 

JSFiddle

Answer 3

很不幸，這是無效的HTML。在整個HTML文件中，ID必須是唯一。

當您使用Javascript的document.getElementById()它取決於瀏覽器，它將返回哪個元素，主要是它是第一個給定的ID。

您將沒有其他機會重新分配您的ID，或者使用class屬性。

Answer 4

給定的ID只能在頁面中使用一次。使用相同ID的多個對象即使位於頁面的不同部分也是無效的HTML。

您可以將您的HTML改成這樣：

<div id="div1" > 
    <input type="text" class="edit1" /> 
    <input type="text" class="edit2" /> 
</div> 
<div id="div2" > 
    <input type="text" class="edit1" /> 
    <input type="text" class="edit2" /> 
</div> 

然後，你可以用CSS選擇這樣獲得的第一項DIV1：

#div1 .edit1 

在jQuery中：

或者，如果你想迭代你的一個div的項目，你可以這樣做：

$("#div1 input").each(function(index) { 
    // do something with one of the input objects 
}); 

如果我不能使用像jQuery或YUI的框架，我會去得到灒和包括它的選擇邏輯（這是相同的選擇引擎是jQuery的內部），因爲DOM操作是大規模用一個好的選擇器庫更容易。

如果我甚至無法使用Sizzle（這會大大降低開發人員的工作效率），那麼可以使用普通DOM函數來遍歷給定元素的子元素。

你會使用DOM函數，如childNodes或firstChild和nextSibling，你必須檢查nodeType以確保你只有你想要的那種元素。我從來沒有用這種方式編寫代碼，因爲它比使用選擇器庫的效率低得多。

Answer 5

在HTML標識中應該是唯一的。我建議你改變你的代碼到這樣的東西：

<div id="div1" > 
    <input type="text" name="edit1" id="edit1" /> 
    <input type="text" name="edit2" id="edit2" /> 
</div> 
<div id="div2" > 
    <input type="text" name="edit1" id="edit3" /> 
    <input type="text" name="edit2" id="edit4" /> 
</div> 

Answer 6

Sample Html code 
<div id="temp"> 
     F1 <input type="text" value="111"/><br/> 
     F2 <input type="text" value="222"/><br/> 
     F3 <input type="text" value="333"/><br/> 
     Type <select> 
     <option value="A">A</option> 
     <option value="B">B</option> 
     <option value="C">C</option> 
     </select> 
     <input type="button" value="Go" onclick="getVal()"> 
    </div> 

Javascript 

    function getVal() 
    { 
     var test = document.getElementById("temp").getElementsByTagName("input"); 
     alert("Number of Input Elements "+test.length); 
     for(var i=0;i<test.length;i++) 
     { 
      if(test[i].type=="text") 
      { 
      alert(test[i].value); 
      } 
     } 
     test = document.getElementById("temp").getElementsByTagName("select"); 
     alert("Select box "+test[0].options[test[0].selectedIndex].text); 
    } 

By providing different tag names we can get all the values from the div. 

Answer 7

var x = document.getElementById("parent").querySelector("#child"); 
// don't forget a # 

或

var x = document.querySelector("#parent").querySelector("#child"); 

或

var x = document.querySelector("#parent #child"); 

或

var x = document.querySelector("#parent"); 
var y = x.querySelector("#child"); 

例如。

var x = document.querySelector("#div1").querySelector("#edit2"); 

Answer 8

你可以試試這個： $（ 「＃DIV1＃EDIT1」）