document.getElementById像一個特定div的函數

Question

document.getElementById將搜索整個文檔並返回結果，但在這裏我想爲特定的div使用相同的函數，因爲我想搜索某個id的特定div並基於此我想執行

這裏是我的代碼

if(document.getElementById('myId')) // but it return the result from whole div 
{ 
    // Do something 
} 
else { 
    // do something else 
} 

我想是這樣

if(document.getElementById('myId') in specific div) \\ how to do this 

Answer 1

你要搜索一個特定id所有div

我假設你知道id您要搜索

可以itenerate的document.getElementsByTagName('div')像這樣

var myID = 4; 

for (var i = 0; i < document.getElementsByTagName('div').length; i++){ 
    var res = document.getElementsByTagName('div')[i+1].id; 
    if(res == myID){ 
     document.body.innerHTML = res; 
     break; 
    } 
} 

，這將是您的HTML樣子：

<div id="1"></div> 
<div id="2"></div> 
<div id="3"></div> 
<div id="4"></div> 
<div id="5"></div> 
<div id="6"></div> 

見Demo here

或者我進一步假設侑HTML代碼是這個樣子：

<div id="myId"> 
    <div id="1"></div> 
    <div id="2"></div> 
    <div id="3"></div> 
    <div id="4"></div> 
    <div id="5"></div> 
    <div id="6"></div> 
</div> 

然後你可以itenerate在document.getElementById('myId').getElementsByTagName('div')這樣的：

var myID = 3; 

for (var i = 0; i < document.getElementById('myId').getElementsByTagName('div').length; i++){ 
    var res = document.getElementsByTagName('div')[i+1].id; 
    if(res == myID){ 
     document.body.innerHTML = res; 
     break; 
    } 
} 

，看看Another Demo Here

Answer 2

讓說，你正在尋找一個元素（DIV）與ID 「id」爲「parentId」的父div中的「childId」。 jQuery代碼將是：

$("#parentId").find("#childId") 

作爲一個簡短，你甚至可以做

$("#parentId #childId") 

由於上述聲明將在任何深度尋找孩子，如果你想直接子搜索，（第一兒童）

$("#parentId > #childId") 

通常id在頁面內是唯一的（或至少推薦:)）。在這種情況下，你可以直接做

$("#childId") 

仍然得到子元素。

無論哪個適用。

Answer 3

id屬性應該是唯一的，因此在另一個元素中搜索一個id爲id的元素與在整個DOM中直接搜索該id相同。

Answer 4

如果它是一個特定的元素的子元素通過使用querySelector可以返回一個元件僅：

document.getElementById('evalBar').querySelector('#button_2'); 

/*返回的值：（HTML按鈕） [對象HTMLButtonElement] */

Answer 5

你可以使用querySelector函數。重要提示：請檢查瀏覽器兼容性！ https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

例子：

 <div id="foo"> 
      <div id="bar"> 
       this is foo-bar 
      </div> 
     </div> 

     <script> 
      var bar = document.querySelector("#foo #bar") 

      alert(bar.innerHTML); // result: alert message "this is foo-bar" 
     </script>