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>