如何在JavaScript中通过ID获取子元素？

我有以下的html：如何在JavaScript中通过ID获取子元素？

<div id="note"> 
<textarea id="textid" class="textclass">Text</textarea> 
</div>

我怎样才能获得textarea元素？我不能用document.getElementById("textid")它

我做它现在这个样子：

var note = document.getElementById("note"); 
var notetext = note.querySelector('#textid');

，但它不能在IE浏览器（8）

怎么回事我能做到这一点？ jQuery是OK

感谢

来源

2011-04-25 Burjua

你为什么不能执行'document.getElementById（“textid”）''的任何原因？如果你可以做'querySelector（'＃textid'）'那么另一个也应该是可能的。如果你有多个具有相同ID的元素，那么你必须改变它。 – 2011-04-25 22:30:23

是的，我试图让这个元素改变它的ID，我还需要对它做一些其他的操作，这就是为什么我想要它在var中。 – Burjua 2011-04-25 23:12:34

这并不能真正回答我的问题。 – 2011-04-25 23:13:16

如果jQuery是没关系，你可以使用find()。这基本上与你现在正在做的事情相同。

$('#note').find('#textid');

您还可以使用jQuery选择基本实现同样的事情：

$('#note #textid');

使用这些方法来得到的东西，已经有一ID是那样的陌生，但我提供这些假设这不是真的如何使用它的计划。

在附注中，您应该知道ID在您的网页中应该是唯一的。如果您打算让具有相同“ID”的多个元素考虑使用特定的类名称。

来源

2011-04-25 22:35:05 Khez

使用jQuery

$('#note textarea');

或只是

$('#textid');

来源

2011-04-25 22:32:00 ataddeini

这里是一个纯JavaScript溶液（不jQuery的）使用的

var _Utils = function() 
{ 
    this.findChildById = function (element, childID, isSearchInnerDescendant) // isSearchInnerDescendant <= true for search in inner childern 
    { 
     var retElement = null; 
     var lstChildren = isSearchInnerDescendant ? Utils.getAllDescendant(element) : element.childNodes; 

     for (var i = 0; i < lstChildren.length; i++) 
     { 
      if (lstChildren[i].id == childID) 
      { 
       retElement = lstChildren[i]; 
       break; 
      } 
     } 

     return retElement; 
    } 

    this.getAllDescendant = function (element, lstChildrenNodes) 
    { 
     lstChildrenNodes = lstChildrenNodes ? lstChildrenNodes : []; 

     var lstChildren = element.childNodes; 

     for (var i = 0; i < lstChildren.length; i++) 
     { 
      if (lstChildren[i].nodeType == 1) // 1 is 'ELEMENT_NODE' 
      { 
       lstChildrenNodes.push(lstChildren[i]); 
       lstChildrenNodes = Utils.getAllDescendant(lstChildren[i], lstChildrenNodes); 
      } 
     } 

     return lstChildrenNodes; 
    }   
} 
var Utils = new _Utils;

实施例：

var myDiv = document.createElement("div"); 
myDiv.innerHTML = "<table id='tableToolbar'>" + 
         "<tr>" + 
          "<td>" + 
           "<div id='divIdToSearch'>" + 
           "</div>" + 
          "</td>" + 
         "</tr>" + 
        "</table>"; 

var divToSearch = Utils.findChildById(myDiv, "divIdToSearch", true);

来源

2015-02-24 11:40:44

不是一个好主意，改变对象原型，不知道为什么我会以这样一种方式得到，因为它可能比它慢一点document.getElementById https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Inheritance_and_the_prototype_chain？redirectlocale = zh-CN＆redirectslug = JavaScript％2FGuide％2FInheritance_and_the_prototype_chain＃Bad_practice.3A_Extension_of_native_prototypes – HMR 2015-02-24 12:19:06

document.getElementById是curse！的解决方案。但是，如果您的元素尚未附加到文档中，则此方法无法工作。并没有在所有元素上定义element.getElementById。如果你可以用getElementById得到例外结果，那就去做吧，但事实并非总是如此。关于对象原型，我接受你的评论，并编辑答案，所以函数不会成为对象方法的一部分，谢谢。 – 2015-02-24 13:25:30

$(selectedDOM).find();

函数寻找所选DOM内的所有DOM对象。即

<div id="mainDiv"> 
    <p>Paragraph 1</p> 
    <p>Paragraph 2</p> 
    <div id="innerDiv"> 
     <a href="#">link</a> 
     <p>Paragraph 3</p> 
    </div> 
</div>

这里，如果你写;

$("#mainDiv").find("p");

你会得到树p元素在一起。在另一边，

$("#mainDiv").children("p");

功能在选定的DOM对象的只是孩子的DOM搜索。因此，通过此代码，您将获得仅第1段和第2段。防止浏览器进行不必要的进展非常有益。

来源

2015-12-20 05:17:21 efirat

(Dwell in atom) 

<div id="note"> 

    <textarea id="textid" class="textclass">Text</textarea> 

</div> 

<script type="text/javascript"> 

    var note = document.getElementById('textid').value; 

    alert(note); 

</script>

来源

2017-02-01 06:39:42

如何在JavaScript中通过ID获取子元素？

回答

相关问题