Почему не работает queryselectorall

querySelectorAll не работает

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

Первоначально я пытался с querySelectorAll но, похоже, это не сработало. Поэтому я решил изменить его на getElementsByClassName и удивительно, что он работал с той же логикой. Может кто-нибудь, пожалуйста, помогите мне с причиной того, почему remove_div не работает пока второй ( remove_div_2 ), нет?

примечание: Я не ищу исправления/решения проблемы, потому что я уже приступил ко второму варианту. Я просто хочу знать причину, почему опция с querySelectorAll не работает.

2 ответов

причина в том, что querySelectorAll метод возвращает статический список. Любые изменения, внесенные в документ после querySelectorAll используется (например, removeChild в этом случае) не будет отражаться в списке возвращаемых узлов. Отсюда elToStyle[elToStyle.length — 1] будет указывать на узел, который был удален.

а, getElementsByClassName С другой стороны возвращает текущий список узлов. Это означает, что elToStyle[elToStyle.length — 1] всегда будет указывать на последний .div независимо от того, какие изменения были внесены в документ после узла список был подготовлен или нет.

ниже-выдержка из официальной документации здесь

объект NodeList, возвращаемый методом querySelectorAll() должен быть статический, не живой ([DOM-LEVEL-3-CORE], раздел 1.1.1). Последующий изменения в структуре базового документа не должны отражается в объекте NodeList. Это означает, что объект будет вместо этого содержит список совпадающих узлов элементов, которые были в этот документ на момент создания списка.

Примечание: вы можете увидеть это, сделав console.log(elToStyle); до и после removeChild .

Если вы хотите ссылаться на последний элемент деления, просто сделайте следующее.

Источник

querySelectorAll not working

I have a requirement where I have to pickup the last .div within a container and apply some business logic to it. The selection of the last .div has to be dynamic because the user has the option to add/remove .div elements.

Initially I tried with querySelectorAll but it did not seem to work. So I decided to change it to getElementsByClassName and surprisingly it worked with the same logic. Can somebody please help me with the reason for why the remove_div doesn’t work while the second one ( remove_div_2 ) does?

Note: I am not looking for a fix/solution to the issue because I have already proceeded with the second option. I just want to know the reason why the option with querySelectorAll doesn’t work.

Below is my code:

2 Answers 2

The reason is because querySelectorAll method returns a static list. Any changes made to the document after the querySelectorAll is used (like removeChild in this case) will not be reflected in the list of nodes returned. Hence elToStyle[elToStyle.length — 1] would still point to the node that was removed.

Whereas, getElementsByClassName on the other hand returns a live list of nodes. This implies that elToStyle[elToStyle.length — 1] would always point to the last .div irrespective of any changes were done to the document after the node list was prepared or not.

Below is the extract from the official documentation available here

The NodeList object returned by the querySelectorAll() method must be static, not live ([DOM-LEVEL-3-CORE], section 1.1.1). Subsequent changes to the structure of the underlying document must not be reflected in the NodeList object. This means that the object will instead contain a list of matching Element nodes that were in the document at the time the list was created.

Источник

Почему код не работает с querySelectorAll?

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Почему один и тот-же код в WindowsForms работает, а в Web не работает?
Здравствуйте, подскажите почему один и тот-же код в WindowsForms работает, а в Web не работает.

Почему не работает код на других компьютерах (на моем работает)?
вот задание: построить ф-ю: на вход поступают 2 строки, на выходе 1 строка, по следующим правилам.

Простейший код работает в MS IE, почему не работает в Mozilla, FireFox?
Приветствую. Вот собственно код: 16

вы перешли по ссылке, кликали по яблокам и очки не добавляются или что?

таковы правила языка js. либо переделывайте на классы либо как-то генерируйте разные id-ы для яблок и вешайте на них сетинтервал

Добавлено через 5 минут

Почему не работает код?
не могу понять почему не рассчитывается результат, помогите пожалуйста. .

Почему не работает код?
Почему не работает код?? В ячейках 7-350 есть формулы, есть значения код должен очищать ячейки, где.

почему не работает код
Есть код $(‘#postText’).on(‘mouseup’, function()< if.

Почему не работает код?
может кто объяснить, в чем проблема? private class TempSum < public int Sum; public int.

Источник

Русские Блоги

Проблемы, обнаруженные в методе querySelectorAll () базового руководства по JavaScript

Write By Monkeyfly

Следующее содержимое является оригинальным, если вам нужно перепечатать, укажите источник.

Во-первых, предпосылка

• Учились последние два дня JavaScript Делегирование мероприятия (или агент мероприятия), чтобы прочитать это, потребовалось два дня«Подробное объяснение делегирования событий или прокси событий в js»Блог, и вручную постучав с двух сторон по предоставленному блоггеру футляру, можно сказать, что вы в основном освоили принцип и использование делегирования событий.
• Этот блог предназначен для Делегирование событий JavaScript Объяснение относительно простое для понимания, и детали есть. Я рекомендую его всем здесь, а заинтересованные друзья могут пойти и научиться самостоятельно.

Позвольте мне рассказать о проблемах, с которыми я столкнулся в процессе обучения.

Описание проблемы (краткое и ясное)

• Если вы начнете использовать querySelectorAll() СпособПолучить элемент, А затем используйте JavaScript из DOM Метод работы createElement() Добавляйте элементы динамическиесли.

• На этот раз, еслиСнова получить длину списка элементов, Вы обнаружите, что длина вообще не изменилась, это все еще длина до добавления элемента.

• несмотря на то что createElement() Метод успешно добавил элементы на страницу, но на самом деле список элементов не обновлялся в реальном времени. Только что добавленный новый элемент не был помещен в исходный список элементов, и я все еще бродил снаружи один, один.

Следующий контент был добавлен позже.

• Однако, если вы извлечете все элементы li в списке ul в это время, а затем снова получите длину списка элементов ，Вы обнаружите, что длина действительно изменилась.

Дополнительное объяснение проблемы

(В 16:54:20 3 июля 2018 г. пользователь сети из Чэнду в группе побеседовал со мной в частном порядке и задал вопрос о возникновении проблемы. Я здесь, чтобы добавить дополнительное объяснение проблемы.)

Запрошенный контент: (как показано на рисунке ниже)

Примечание: он дважды вызвал querySelectorAll () до и после, то есть дважды получил.

Следовательно, список, полученный дважды, отличается.

И сказал:

• Дайте мне свой блог, и я изучу его
• Брат, все кончено, ты наверное ослеплен

Впоследствии я привел аргумент и ответил: (как показано на рисунке ниже)

Примечание. Я вызвал метод querySelectorAll () только один раз, то есть получил его один раз.

Таким образом, список, полученный дважды до и после, одинаков.

*Я ответил:

• Вообще говоря, он не приобретается повторно, как мы обычно используем.
• Если вы получите его снова, он не будет обновляться в реальном времени.
• Обычно, когда мы получаем определенный список элементов, мы не получаем его снова.
• Вместо этого используйте его напрямую.

Впоследствии я использовал getElementsByTagName() Метод проверяется еще раз: (как показано на рисунке ниже)

Примечание. Здесь вызывается метод getElementsByTagName (), чтобы получить его, и он получает его только один раз.

Почему длина полученного списка дважды непоследовательна? Причина будет рассмотрена позже.

Совет: используйте методы querySelectorAll () и getElementsByTagName (), чтобы получить разницу между содержимым списка. (Пожалуйста, обратите внимание, это главное . )

Последний диалог: (как показано ниже)

Причина проблемы

В основном это следующие 4 пункта:

В процессе написания кода я не обращался к авторскому коду синхронно для написания, а использовал новый метод, с которым я был знаком всего несколько дней назад и еще не полностью освоил. который querySelectorAll() 。

Я знаю только причину этого метода, но не знаю почему. Почему? Потому что я даже JavaScript Книга базового руководства еще не прочитана, и основная реализация не имеет возможности связаться или понять. Знаю только, что такой метод есть, и он прост и быстр в использовании, просто используйте его, когда вам это нужно.

Я сам написал несколько групп ul Перечислил и дал разные id , Значит, будет много li Элементы пока querySelectorAll() Метод можно использовать CSS Селектор выполняет точное позиционирование до желаемого ul В списке li элемент.

Но да getElementsByTagName() Метод, он также заботится о нижнем индексе i Значение. Потому что ты должен знать, что получить ul В списке li Элемент — это целое document Первые несколько документов li , Сложно считать. И я хочу указать только текущую конкретную группу li Событие регистрации элемента, не хочу заботиться о других li Element, поэтому от этого метода отказались.

На самом деле, нет необходимости так сильно запутывать, какой бы простой в использовании, какой удобный.

1. Введение в метод querySelectorAll ()

Давайте сначала посмотрим на синтаксис:

Описание:

• В использовании document.querySelectorAll(selectors) Когда этот метод получает элемент, мы все знаем, что это HTML5 Добавлен DOM Метод работы. Этот метод вернет коллекцию элементов, и этой коллекцией можно управлять в виде массива, что очень удобно в использовании.
• Но на самом деле коллекция не является массивом в истинном смысле слова, о ней можно сказать только «Псевдо-массив» (или «подобный массиву») О причине я расскажу ниже.
• Этот метод на самом деле getElementsByTagName() Метод очень похож, все возвращенные — псевдо-массив, вы можете сравнить память.

Примечание:
На самом деле, я все еще прав querySelectorAll( ) Суть этого метода не понятна, я знаю только, что это один из методов получения элементов, и знаю, что это через CSS Способ получения элемента селектора. Что касается остальных, то непонятно.

Вопрос: что такое массив или псевдо-массив?

querySelectorAll( ) Этот метод может возвращать все совпадающие элементы в документе в соответствии с селектором, указанным пользователем, поэтому он возвращает список элементов, который эквивалентен коллекции элементов, которую мы можем вызвать «Как массив» ,или же «Псевдо-массив» 。

В: Почему вы так говорите?
Ответ: Потому что Он может использовать определенные характеристики массивов, но не имеет методов, которые есть у массивов.

Как массив 2:00 характеристика:

• Можно использовать массив length Атрибуты;
• Можно использовать массив Подстрочная форма Выполните некоторые операции;

2. Введение в метод getElementsByTagName ()

грамматика:

Описание:

Это также способ получить элементы, используя имя тега для получения элемента, возвращаемый также является набором элементов, мы называем его «Массив» (т. Е. Набор элементов) . То есть он может использовать массив length Свойство, вы также можете использовать нижнюю форму массива для работы.

Помимо метода document Кроме того, вы также можете подобрать другие DOM Элемент, вы также можете использовать JavaScript Динамически создается DOM элемент.
Однако getElementById() Только перед методом document , Вы не можете использовать это JavaScript Динамически создаваемые элементы DOM.

getElementsByTagName() Порядок, в котором методы возвращают элементы, соответствует их порядку в документе.

Если вы положите «*» Перейти к getElementsByTagName() Method, он вернет список всех элементов в документе.

Примечание:

• Этот метод обычно очень распространен в коде, вероятность столкновения относительно велика, и он относительно популярен.По сути, каждый будет использовать этот метод.
• При изучении манипуляции с DOM этот метод является ключевым содержанием, которое необходимо освоить.

2. Восстановление сцены

Я думаю, что картинки и тексты — лучший способ решить проблему. Кто бы хотел прочитать столько текстов? Если бы это был я, я бы точно не был счастлив. Приступим сейчас.

Статические страницы

HTML код

Код CSS (можно пропустить напрямую, просто чтобы более интуитивно увидеть область, занимаемую каждым элементом, чтобы облегчить наблюдение за связанными операциями событий делегирования события)

Код JavaScript (это ядро)

Авторский код (ставятся только разные части)

На самом деле просто получить li Для элемента используется другой метод. Итак, какой эффект будет иметь каждое из них?

Достигнутый эффект: с помощью метода querySelectorAll ()

Эффект, достигнутый автором: используйте метод getElementsByTagName ()

3. Анализ случая:

Видя это, наверное, все уже знают причину. Да, просто используйте querySelectorAll() Ради метода.
Давайте кратко проанализируем это:

Q: Первая казнь mHover() Когда это метод?
Ответ: Перед динамическим добавлением элементов, то есть после регистрации события входа и выхода мыши для каждого элемента li.

В: А как насчет второго раза?
Ответ: Выполнить после срабатывания события нажатия кнопки добавления или удаления. При выполнении только что добавленный li Элемент был создан динамически. В это время он выполнится один раз mHover() Method, также зарегистрируйте событие перемещения мыши для вновь добавленного элемента li, верно?

Давай еще раз оглянемся mHover() Этот метод, посмотрите на цикл for oLi2.length Какое возвращаемое значение?

мы в mHover() Внутри метода добавьте следующие два оператора в следующую строку в конце цикла for:

Получите следующее возвращаемое значение:

• Очевидно, querySelectorAll() Статический метод получения элементов в начальном DOM После динамического изменения элемента значение в его списке элементов не может быть обновлено в реальном времени.
• Это показывает, что изменение структуры документа не повлияло NodeList Стоимость в. Он неизменно придерживается первоначальной идеи и не будет поколеблен внешним миром. Как бы ни менялся внешний мир, я просто не хочу поддаваться соблазну, это заставило меня поставить полную оценку!

Четыре, ищите нижнюю строку

Чтобы понять, что происходит? Я пошел спросить Ду Нянга, потому что тот, который я сейчас читаю JavaScript Базовые руководства не могут помочь мне решить такие сложные проблемы. Неудивительно, что есть люди, которые столкнулись с той же проблемой и провели небольшое исследование, чтобы прийти к выводу.

Итак, я нашел следующие статьи, которые помогли мне решить проблему:

Первым делом я видел эту операцию в первой статье:

Итак, возникает вопрос?

Вопрос 1: Кто такой instanceof? Почему ты им пользуешься?

instance of ? Не помню, зачем его используют? Вроде бы о типе объекта можно судить. Сначала учись JavaScript Я выучил это, когда был там, и я не прикасался к нему год, и я все забыл. Однако недавно я узнал typeof Это сразу пришло мне в голову, что побудило меня снова найти разницу между ними.

Отличия заключаются в следующем:

То же самое: и то, и другое можно использовать, чтобы определить, является ли переменная пустой или ее типа.
Разница:
（1） typeof Используемый для определения типа переменной, он возвращает строку, которая представляет тип, к которому она принадлежит.
Возвращаемое значение включает пять основных типов данных и один сложный тип данных. который number、boolean、string、undefined с null ;а также object 。
（2） instance of Используется для определения того, является ли переменная экземпляром объекта.

Вопрос 2: Кто такой NodeList? Что такое HTMLCollection?

После проверки выясняется, что оба они являются объектами, и оба представляют собой набор узлов.

Сходство: оба они являются объектами коллекции, а возвращаемое значение представляет собой массив.

разница:

（1） NodeList К Node.childNodes с document.querySelectorAll возвращаться. Оно имеет length Атрибуты,
Назад NodeList Количество узлов, содержащихся в объекте.

Примечание: Node.childNodes Возвращает коллекцию, содержащую дочерние узлы указанного узла. Коллекция представляет собой коллекцию мгновенных обновлений.

в большинстве случаев, NodeList Объекты — это набор изменений в реальном времени (немедленные обновления).
Что это значит? То есть всякий раз, когда узел в документе （DOM） Дерево меняется, существующие NodeList Тема изменится соответственно.

Его основная реализация эквивалентна снимку набора элементов, а не динамическому запросу для поиска документов.
Этого можно избежать NodeList Проблемы производительности, которые обычно вызывают объекты.

Однако в других случаях NodeList Это статическая коллекция.
Это означает, что DOM Никакие изменения элементов не повлияют NodeList Содержимое коллекции.

и document.querySelectorAll() Метод возвращаетВсе еще NodeList 。

Особенно, когда вы выбираете, как пройти NodeList Об этом различии лучше всего помнить при кэшировании длины всех элементов в списке.

Больше подробностей NodeList , Нажмите здесь, чтобы просмотретьWeb/API/NodeList。

（2） HTMLCollection Интерфейс представляет собой общий набор элементов. Он также имеет length Значение свойства возвращает количество дочерних элементов в коллекции.

• HTML DOM середина HTMLCollection Он обновляется мгновенно; при изменении структуры документа, который он содержит, он обновляется автоматически.

Больше подробностей HTMLCollection , Нажмите здесь, чтобы просмотретьWeb/API/HTMLCollection。

Больше подробностей HTML DOM , Нажмите здесь, чтобы просмотреть»Что возвращает getElementById? Поговорим о HTML DOM «

5. Резюме:

HTMLCollection Сделал это с DOM Изменения элементов вызывают динамические изменения, а NodeList Значение в коллекции элементов не обновляется сразу, в чем разница. Одно — статическое, второе — динамическое, конечно же, другое!

Наконец, я также сделал вывод о консоли, как показано на следующем рисунке:

Используйте метод querySelectorAll ():

Используйте метод getElementsByTagName ():

Заинтересованные студенты могут пойтиСеть разработчиков Mozilla Посмотреть похожие Web Документация, этот сайт предоставляет информацию об открытых веб-технологиях. (Open Web) Информация, включая HTML 、 CSS И всемирная паутина, и HTML5 Применяемый API . Он также записывает Mozilla Документация по продукту. Назначение сайта: От разработчиков, разработчиков сервисов 。

Шесть, заключение

Что-то было отложено сегодня вечером Я не закончил блог раньше, и писать так поздно было действительно беспомощно. Внезапно выяснилось, что уже 05:36 утра. От начала до конца неосознанно прошло три часа. В конце концов, проблемы, которые остались сегодня, должны быть решены в тот же день. Не откладывайте внедрение на завтра. Вы знаете последствия. Чем больше людей медлить, тем меньше они не хотят, чтобы сделать это, и тем более они не хотят, чтобы это сделать, то ленивее они становятся. Они всегда могут напоминать себе, мотивировать себя, и упорствовать на ведение блога каждый день.

Хотя вначале было действительно утомительно писать блог, я Дева. Я всегда был строг с собой и был крайним перфекционистом. Конечно, я не позволяю своему блогу быть поверхностным. Если я закончу его поспешно, Я должен серьезно писать. Сегодня столько пиши, пора спать.

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

Поэтому вы должны быть строги к себе, разумно распределять время и не смотреть на лучшее. На начальном этапе вы должны больше наблюдать, больше думать и больше практиковаться, а не просто оглядываться и с нетерпением ждать обучения. Постарайтесь учиться как можно быстрее и эффективнее, сформулируйте свой собственный набор научных и разумных методов обучения и создайте набор уникальных систем знаний, демонстрирующих ваш собственный стиль. Разве это не хорошо?

Источник