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

ProgramBox

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

Post author:admin
Запись опубликована:12 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #element

#javascript #jquery #элемент

Вопрос:

У меня есть следующий 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. Есть причина, по которой вы не можете сделать document.getElementById("textid") ? Если вы можете сделать querySelector('#textid') , то другой тоже должен быть возможен. Если у вас есть несколько элементов с одинаковым идентификатором …. что ж, вам придется это изменить.

2. Да, я пытаюсь заставить этот элемент изменить свой идентификатор, мне также нужно выполнить с ним некоторые другие действия, вот почему я хочу, чтобы он был в var.

3. На самом деле это не отвечает на мой вопрос.

4. Изменение идентификатора элемента обычно является ужасной идеей. Состояние лучше обрабатывать с помощью класса или данных.

Ответ №1:

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

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

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

 $('#note #textid');

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

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

Обновление 2020.03.10

Для этого проще простого использовать собственный JS:

 document.querySelector('#note #textid');

Если вы хотите сначала найти, #note тогда #textid вам нужно проверить результат первого querySelector. Если он не соответствует, объединение в цепочку больше невозможно : (

 var parent = document.querySelector('#note');
var child = parent ? parent.querySelector('#textid') : null;

Ответ №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);

1. Не очень хорошая идея менять прототип объекта и не уверен, почему можно было бы обойтись I’d таким образом, поскольку это, вероятно, медленнее, чем document.getElementById developer.mozilla.org/en-US/docs/Web/JavaScript /…

2. document.getElementById — это решение, проклятие!. Однако, если ваш элемент еще не был прикреплен к документу, этот метод не сработает. И использовать element.getElementById не определен для всех элементов. Если вы можете получить исключенный результат с помощью getElementById, действуйте, однако это не всегда так. Что касается прототипа объекта, я принимаю ваш комментарий и редактирую ответ, поэтому функция не будет частью методов объекта, спасибо.

Ответ №3:

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

Ответ №4:

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

 $('#note textarea');

или просто

 $('#textid');

Ответ №5:

 $(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-объекта. Итак, с помощью этого кода вы получите только параграф 1 и параграф 2. Это так полезно, чтобы браузер не выполнял ненужный прогресс.