如何在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獲取子元素？

回答

相關問題