Как получить дочерний элемент по ID в JavaScript?

У меня есть следующий html:

<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 в порядке

Спасибо

Ответы

Ответ 1

Если jQuery в порядке, вы можете использовать find(). Это в основном эквивалентно тому, как вы это делаете прямо сейчас.

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

Вы также можете использовать селектор jQuery, чтобы в основном добиться того же:

$('#note #textid');

Использование этих методов для получения чего-то, у которого уже есть идентификатор, довольно странно, но я поставляет их, полагая, что это не так, как вы планируете его использовать.

На боковой ноте вы должны знать, что идентификатор должен быть уникальным на вашей веб-странице. Если вы планируете иметь несколько элементов с тем же "ID", подумайте об использовании определенного имени класса.

Ответ 2

Вот чистое решение 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);

Ответ 3

Использование jQuery

$('#note textarea');

или просто

$('#textid');

Ответ 4

$(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. Это так полезно, чтобы браузер не делал ненужного прогресса.

Ответ 5

(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>